很多时候,比如网站最基本的文章列表,标题会很长,而显示列表的区域宽度却没有这么宽,这时候最正常的做法就是让超出宽度的部分文字用省略号(…)来表示。
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就可以这么写:
使用样式前:
使用样式后:
1.经过XUL处理过的文本你将不能被选中,按理说-moz-user-select: text; 属性将允许文本被选中,但是我没有试验成功。
2.如果你给父元素绑定了XUL,那么子元素的内容将变得不可见。例如:
它的源代码实际上是:
<p>It is a long<em> haha</em> long long long long text! </p>
既然XUL无法完美解决Firefox下文字溢出显示…,那么我们就求助javascript吧,当然,并不是古老的截取一定数目的字符来实现。
这里以jQuery为例,代码如下:
width:100%; /*IE6需要定义宽度 */
word-break:keep-all;
white-space:nowrap;
overflow:hidden;
-o-text-overflow:clip;/*Opera */
text-overflow:clip;/*IE Safari(Webkit) */
}