网页之文本溢出显示省略号
1、单行文本溢出显示省略号的css写法
1 overflow:hidden; 2 text-overflow:ellipsis; 3 white-space:nowrap;/*不换行*/
2、多行文本显示省略号
这里根据应用场景来实现
1）Webkit浏览器或移动端页面
可以使用webkit的私有属性：-webkit-line-clamp（这个属性不属于css规范），该属性用来显示块元素显示的文本行数。要实现该效果，需要组合其他的Webkit属性。
常见结合的属性：
display: -webkit-box;必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。-webkit-box-orient必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本
例如：
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>多行文字溢出省略</title> 6 <style> 7 .text-contorl{ 8 display: -webkit-box; 9 -webkit-box-orient:vertical; 10 -webkit-line-clamp:3;/*显示3行文字*/ 11 text-overflow: ellipsis; 12 font-size: 16px; 13 border: 1px solid #ccc; 14 width: 500px; 15 max-height: 300px; 16 overflow: hidden; 17 } 18 </style> 19 </head> 20 <body> 21 <p class="text-contorl"> 22 摘要: 之前公司是用flash做的这个网站，现在因为访问速度过慢或者别的原因，由我来用html5重新写过，排版布局和之前的都是一样的。网页总体需要实现以下功能：（1）背景图片轮播（2）文字动画的实现（3）导航条动画效果（4）设计图片的展示效果（不知道怎么写，其实我还没弄明白它的实现原理，差不多就是图片的无缝 23 </p> 24 </body> 25 </html>
运行效果
2）跨浏览器兼容方案
比较靠谱的做法就是设置相对定位的容器高度，用包含省略号（...）的元素模拟实现
例如：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>多行文字溢出省略</title> <style> .text-contorl{ position: relative; line-height: 1.4em; height: 3.2em; overflow: hidden; } .text-contorl:after{ content: "..."; font-weight: bold; bottom: 0; right: 0; padding: 0; } </style> </head> <body> <p class="text-contorl"> 摘要: 之前公司是用flash做的这个网站，现在因为访问速度过慢或者别的原因，由我来用html5重新写过4）设计图片的展示效果（不知道怎么写，其实我还没弄明白它的实现原理，差不多就是图片的无缝滚动。 </p> </body> </html>
运行效果
这里需要注意的是：
- height的高度需要设置 正好是line-height的3倍（经过测试发现，如果height的值设置过小，省略号没有显示，所以可能需要按需调整）
- 结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
- IE6-7不显示
content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用<span class="line-clamp">...</span>去模拟； - 要支持IE8，需要将
::after替换成:after；
参考来自：http://www.css88.com/archives/5206
