text-overflow的用法

在平时的网页制作中一定碰到过内容溢出的问题，比如说文章列表很长，而其宽度又受到限制，此时超出宽度的内容就会以（...）显示。以前实现这样的效果都是由后台程序截取一定的字符数在前台输出，另外一种方法就是使用js截取一定的字符数来实现。可是这两种方法都有其不足之处，比如说中文 和英文的计算字符宽度的问题，这个值不好计算，所以造成截取字符数不好控制，从而其通用性也差。CSS3中的text-overflow这个属性，九科以轻松地实现。

语法text-overflow：clip | ellipsis

clip表示不显示省略符号，只是截裁。必须要在一定的设置高度下配合overflow:hidden使用，如果没有设置高度，不会显示其效果。

ellipsis:文本溢出是就会显示省略号。也是要在一定的 设置高度下配合overflow:hidden；white-space:nowrap两个属性配合使用，才会有效果，上一步加上了overfow:hidden属性，下面加上white-space：nowrap，让文本不换行，就会出现省略号的效果。

text-overflow:clip所有浏览器都支持，但是text-overflow:ellipsis只有Firefox不支持，text-overflow:ellipsis应用在Opera浏览器下时，需要加上其前缀“-o-”。