css:文章标题过长时,使用省略号
html代码
<ul>
<li><a href="" target="_blank">我是文章1,现在标题过长,使用css加省略号</a></li>
<li><a href="" target="_blank">文章2</a></li>
<li><a href="" target="_blank">文章3</a></li>
</ul>
css代码
ul{
width: 160px;
background: silver;
/*列表样式位置改为内部,使image生效*/
list-style-position: inside;
list-style-image: url("../source/bullet.png");
}
li{
/*不换行*/
white-space: nowrap;
/*溢出的话,隐藏*/
overflow: hidden;
/*文本溢出时,是否....*/
text-overflow: ellipsis;
}
显示效果

css:文章标题过长时,使用省略号的更多相关文章
- CSS,bootstrap表格控制当td内容过长时用省略号表示,以及在不使用bootstrap时过长也用省略号表示
首先需要在table中设置table-layout:fixed; <table style="table-layout:fixed"></table> 然后 ...
- CSS文本单行显示溢出时出现省略号,多行时首行缩进并出现省略号
为了展示表格显示字数控制,比如商品类名字太长只展示部分 1.正常文本 效果: 2.单行时出现省略号 效果: 3.多行首行缩进并出现省略号 效果:
- css控制标题长度超出部分显示省略号
width: 50px; overflow:hidden;white-space:nowrap; text-overflow:ellipsis; 设置或检索是否使用一个省略标记(...)标示对象内文本 ...
- css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进
一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四. ...
- css实现文本过长时自动添加省略号
1. 效果 2. Html <div id="main_app_content" class="container"> <div class= ...
- css实现文字太长,显示省略号
/*显示为省略号*/ overflow:hidden;/*隐藏*/ white-space:nowrap;/*文本不进行换行*/text-overflow:ellipsis;/*省略号*/ /*强制 ...
- kendo ui treeview 标题太长时的自动换行
添加以下CSS即可: div.k-treeview{white-space: normal;}
- 如何使用css和jquery控制文章标题字数?
如何使用css控制文章标题字数? 最佳答案 控制文章标题字数,不是动态网页的专利,如果静态页面使用CSS样式,也可以实现相同的效果! 看这个例子,你们可以复制到记事本保存为HTML文件看效果! < ...
- CSS文字超出div或者span时显示省略号
我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...
随机推荐
- 【Android】Android studio 编译问题:finished with non-zero exit value 2
1.Android studio 编译问题:finished with non-zero exit value 2 问题: Error:Execution failed for task ':andr ...
- WebService性能测试
什么是WebService?(本文也会在最下面通俗的介绍) 这里给一个站内大哥的讲解:http://www.cnblogs.com/Leo_wl/archive/2010/05/20/1740205. ...
- Charles下载和使用
下文作为备份.来源:https://www.cnblogs.com/rrl92/p/7928770.html 1. Charles下载地址 地址:https://www.charlesproxy.co ...
- linux 文件常用操作
linux 文件基本操作 新建文件:touch test 不会替换重名文件,并且linux一切都是文件,文件夹和文件不能重名 新建文件夹:mkdir test使用 -p 参数,同时创建父目录(如果不存 ...
- tcp.cc
ns2-tcp-tcp.cc /* -*- Mode:C++; c-basic-offset:8; tab-width:8; indent-tabs-mode:t -*- */ /* * Copyri ...
- Hadoop学习---CentOS中hadoop伪分布式集群安装
注意:此次搭建是在ssh无密码配置.jdk环境已经配置好的情况下进行的 可以参考: Hadoop完全分布式安装教程 CentOS环境下搭建hadoop伪分布式集群 1.更改主机名 执行命令:vi / ...
- 如何制作EDM邮件营销模板之图片注意事项
在制作EDM邮件营销的邮件模板的时候我们总喜欢添加一些图片来提高读者阅读兴趣,现在U-Mail邮件群发平台根据已有的一些经验来分享给一下邮件内容中添加图片要注意的问题: 1.尽量少使用图片,特别是重要 ...
- [python]emlog相册插件getshell exploit
昨天本站转载了emlog相册插件的漏洞分析文章,当然也有html版的getshell代码,喜欢的同学们可以直接用昨天文章中分享的代码.为了练习python,小弟用python又重写了一次,喜欢的同学们 ...
- UVa 1638 - Pole Arrangement(dp)
链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- Myeclipse 自带Tomcat启动8080端口占用
在启动Myeclipse自带的Tomcat发现报错,显示8080端口被占用 第一步:window+r 组合键,调出命令窗口. 第二步:输出命令:netstat -ano|findstr 8080 ...