通过CSS控制文字在一行中，超出部分显示省略号；
先来看看测试环境和示例代码：
测试浏览器： IE6/7/8/9、opera12.02、firefox15.0.1、chrome21.0.1180.89 m
<p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ 省略我吧！ </p>
下面介绍示例中几个重点CSS属性：
1、text-overflow: ellipsis;
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。
简单理解就是我要把文本限制在一行（white-space: nowrap;），肯定这一行是有限制的(width)，并且你的溢出的部分要隐藏起来（overflow: hidden；），然后出现省略号（ text-overflow: ellipsis）。
这里逐风博客附带一个解决低版本opera不兼容的解决方法：
-o-text-overflow：ellipsis
![CSS控制文字在一行中超出部分显示省略号[转] - 配图](https://img.genban.org/allimg/c170613/14a344X239510-19103.png)
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！