CSS文本溢出：text-overflow:ellipsis

很多时候，比如网站最基本的文章列表，标题会很长，而显示列表的区域宽度却没有这么宽，这时候最正常的做法就是让超出宽度的部分文字用省略号(…)来表示。

text-overflow是一个比较特殊的属性，W3C早前的文档中（目前的文档中没有包含text-overflow属性，FML!）对其的定义是:

Name: text-overflow-mode

Value: clip | ellipsis | ellipsis-word 

clip : 　不显示省略标记（…），而是简单的裁切

ellipsis : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。

ellipsis-word : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

 至于为什么一开始我说text-overflow是一个比较特殊的样式呢？因为我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了（表现上是超出部分显示省略标记…）。

 

text-overflow: ellipsis属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。

 参考资料：http://www.52css.com/article.asp?id=602

 

那么，如果我们要给p标签定义text-overflow:ellipsis就可以这么写：



 使用样式前：


 

使用样式后：



 

浏览器兼容状况



Firefox不支持这个属性！还有别的办法么，当然有，方法还挺多的。比如Mozilla developer center推荐的-moz-binding CSS属性。Mozilla developer center给出的理由是text-overflow没有W3C的规范…但是因为Firefox支持XUL，一种XML的用户界面语言。并且Firefox还支持XBL，一种XML绑定语言，这样我们就可以使用Mozilla
developer center推荐的-moz-binding CSS属性来绑定XUL里的ellipsis属性了。

 

1.XUL方式

首先，我们创建XUL，它应该被保存为ellipsis.xml： 



 然后我们需要把这个xml文件放到一个目录，原来的css需要加一条，变成这样



 虽然Firefox通过XUL的方式实现了ellipsis，但是还是需要注意以下这些问题：

1.经过XUL处理过的文本你将不能被选中，按理说-moz-user-select: text; 属性将允许文本被选中，但是我没有试验成功。

2.如果你给父元素绑定了XUL，那么子元素的内容将变得不可见。例如：



 如果你只是给p节点绑定了XUL，那么在Firefox下你将看不到haha这个内容。

它的源代码实际上是：
<p>It is a long<em> haha</em> long long long long text!  </p>

参考资料:

http://www.w3.org/TR/2003/CR-css3-text-20030514/

http://www.quirksmode.org/css/contents.html

https://bugzilla.mozilla.org/show_bug.cgi?id=312156

https://developer.mozilla.org/En/XUL

https://developer.mozilla.org/En/XUL/Description

http://www.rikkertkoppes.com/thoughts/2008/6/

http://www.w3.org/TR/xbl/

http://www.w3.org/TR/css3-text/

  

2.Javascript方式

既然XUL无法完美解决Firefox下文字溢出显示…，那么我们就求助javascript吧，当然，并不是古老的截取一定数目的字符来实现。

这里以jQuery为例，代码如下：



 

这段js的原理很简单，就是通过不断的比较宽度值，然后逐个缩短字符宽度，当最后宽度合适的时候，停止循环，就实现了文字溢出显示…的效果。



以上是转自网络的：下面是自己在使用过程中（table）的写法，这样的效果是没有省略号，如果想要出现可以自己改text-overflow（-o-text-overflow）：ellipsis 属性：

table｛

table-layout:fixed;

｝

table td{
width:100%; /*IE6需要定义宽度  */
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
-o-text-overflow:clip;/*Opera  */
text-overflow:clip;/*IE Safari（Webkit） */
}

你还可以指定th的固定显示宽度，这样显示的效果会更加好看：