关于text-overflow和white-space

两者都是CSS文本属性,首先说明一下:

※ text-overflow:clip | ellipsis
版本:IE6+专有属性
取值:clip 默认值。不显示省略标记(...),而是简单的裁切;
ellipsis 当对象内文本溢出时显示省略标记(...) 。
说明:设置或检索是否使用一个省略标记(...) 标示对象内文本的溢出。
这个属性仅仅作用于水平内联方向的,普通的西方文本的溢出。内联溢出发生在行内的文本超出可用宽度却没有换行机会的时候。

※ white-space:normal | pre | nowrap | inherit
版本:未知
取值:normal 默认值。文本自然换行。如果超过元素宽度,内容自然换到下一行;
nowrap 不允许换行;
inherit 浏览器自动选择;
pre 保留换行和空白。这个值只有当你声明了!DOCTYPE,且 IE 6 以上版本才支持。
说明:用来处理空白,适用于所有块类型的元素 (block elments)。
在 HTML文件里,空白,比如换行符 (line breaks)、 空格 (spaces)、 制表符 (tabs),都被自动截去。HTML会自动截去多余的空格。不管你加多少空格,都被看做一个空格。为了在网页中增加空格,你可以使用 &nbsp; 表示空格。你也可以用<br>强制换行。

要强制溢出发生并且应用ellipsis 值,必须设置对象的white-space 属性值为nowrap 。
假如没有换行机会(例如,对象容器的宽度是狭窄的,而内有很长的没有合理断行的文本),没有应用 nowrap 也有可能溢出。
为了使 ellipsis 值被应用,此属性必须被设置到具有不可视区域的对象。最好的选择是设置overflow 属性为 hidden 。设置overflow 属性为scroll 或者auto 时,此属性也会应用。但是会有滚动条出现。
通过选择省略标记,隐藏的文本可以被选择。当选择发生时,省略标记会隐藏而被文本替换。
此属性为在DHTML中制作省略标记提供了高效的方法。
此属性对于currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为textOverflow 。
示例:
div {overflow: hidden; text-overflow:ellipsis; }

在百度空间中,为了节约空间,我们可结合二者,将好友最新文章的摘要换作一行显示(也可以用于其他模块)。鄙人已编辑的CSS如下,效果见本空间主页:

#mod_friblog div.item a.cnt{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html>body #mod_friblog div.item a.cnt{-moz-text-overflow:ellipsis;} /*此句为了兼容firefox*/

Leave a Reply

Your email address will not be published.