css把超出的部分显示为省略号的方法兼容火狐
2016-03-17 17:30
639 查看
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>css把超出的部分显示为省略号的方法兼容火狐</title> <style> * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } a:hover { text-decoration: none; color: #000; } ul { width: 300px; margin: 40px auto; padding: 12px 4px 12px 24px; border: 1px solid #D4D4D4; background: #F1F1F1; } li { margin: 12px 0; } li a { display: block; width: 80px; overflow: hidden;/*注意不要写在最后了*/ white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } /* firefox only */ li:not(p) { clear: both; } li:not(p) a { max-width: 170px; float: left; } li:not(p):after { content: "..."; float: left; width: 25px; padding-left: 5px; color: #000; } </style> </head> <body> <ul> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> <li><a href="#">suntear的技术空间</a></li> </ul> </body> </html>
相关文章推荐
- 探究CSS line-height属性
- css3学习--css3动画详解一(animation属性)
- [转]CSS 那么多属性,而且每个属性都有多个值怎么记?
- CSS边距问题
- CSS设置属性
- CSS基础知识
- CSS所遇问题小
- html+css 清除浮动的相关技巧心得
- QTabWidget添加自定义样式
- 环形进度条的实现方法总结和动态时钟绘制(CSS3、SVG、Canvas)
- CSS3参考文档
- css3多行文本溢出显示省略号(…)
- CSS裁剪clip
- CSS之可收缩的底部边框
- CSS之可收缩的底部边框
- CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦
- css实现小三角(原理)
- js中巧用cssText属性批量操作样式(转)
- CSS布局——DIV水平居中和垂直居中
- CSS - 实现图片垂直居中,文字垂直居中