CSS控制文字在一行中超出部分显示省略号[转]

通过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

The End

---