纯css文本溢出省略(兼容IE6+、FF2.0+、Opera9.26+、sefari)
2015-06-02 09:18
225 查看
这个效果弄了,很久,现在终于有头绪了。
xhtml:
<ul>
<li><a href="http://yuxnet.blog.163.com/blog/">很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀</a></li>
<li><a href="http://yuxnet.blog.163.com/blog/">很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀</a></li>
<li><a href="http://yuxnet.blog.163.com/blog/">很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀</a></li>
<li><a href="http://yuxnet.blog.163.com/blog/">很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀</a></li>
<li><a href="http://yuxnet.blog.163.com/blog/">很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀</a></li>
<li><a href="http://yuxnet.blog.163.com/blog/">很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀</a></li>
</ul>
css:
ul li a{float:left;display:block; width:200px; white-space: nowrap; overflow: hidden;
o-text-overflow: ellipsis;/* for Opera */
text-overflow: ellipsis;/* for IE */}
ul li:after{ content:'...';}/* for Firefox */
@media all and (min-width: 0px){ul li:after{ content:""; }/* for Opera 、sefari*/ }
xhtml:
<ul>
<li><a href="http://yuxnet.blog.163.com/blog/">很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀</a></li>
<li><a href="http://yuxnet.blog.163.com/blog/">很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀</a></li>
<li><a href="http://yuxnet.blog.163.com/blog/">很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀</a></li>
<li><a href="http://yuxnet.blog.163.com/blog/">很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀</a></li>
<li><a href="http://yuxnet.blog.163.com/blog/">很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀</a></li>
<li><a href="http://yuxnet.blog.163.com/blog/">很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀很长很长呀</a></li>
</ul>
css:
ul li a{float:left;display:block; width:200px; white-space: nowrap; overflow: hidden;
o-text-overflow: ellipsis;/* for Opera */
text-overflow: ellipsis;/* for IE */}
ul li:after{ content:'...';}/* for Firefox */
@media all and (min-width: 0px){ul li:after{ content:""; }/* for Opera 、sefari*/ }
相关文章推荐
- div+css+js一级下拉菜单完美版
- CSS设计网页时的一些常用规范
- 设置滚动条样式
- 使用CSS实现圆角Div(无图片)
- CSS页面布局
- CSS三栏布局
- CSS固定顶底之一
- 【转载】二十款好看的css字体样式
- 超简洁的CSS下拉菜单
- js获取css值的方法:style、getComputedStyle和currentStyle
- CSS 选择器
- 我应该使用哪种wsdl样式?
- CSS 概述
- css和js结局背景图自适应游览器大小
- getStyle(),修改样式属性
- css3 text-shadow
- 父窗口采用js控制iframe页面样式
- Html-Css-设置DIV边框圆滑
- 关于更改ListBox的ItemsPanel样式
- CSS: Float a div on another div, Ex: Text caption on picture