使用CSS处理长字符串

使用CSS处理长字符串

2008年08月31日 星期日 下午 12:19

作者：老王

 

长字符串的换行显示

对中文而言，长字符串不是问题，浏览器本身可以正确的换行，但对于英文字符而言，就可能会突破容器的宽度，影响美观。解决方法并不难，不过要考虑到IE和Firefox的兼容问题：

<div style="width: 100px; height: 100px; border:1px solid #000000; word-wrap:break-word; overflow:hidden;">
abcdefghijklmnopqrstuvwxyz
</div>

IE会根据word-wrap的设置正确的换行，Firefox虽然不识别word-wrap，但是会按照overflow的设置做一个权宜的处理。

在针对IE的方案中，注意尽可能使用word-wrap，而不是word-break，这是因为word-break不会处理连续的英文标点符号。

长字符串的省略显示

有的时候，在处理长字符串的时候，必须保持单行，这时只能隐藏多余的部分，并在结尾加上省略号：

<div style="width: 100px; white-space:nowrap; overflow: hidden; text-overflow:ellipsis;">
one world. one dream.
</div>

IE下一切正常，但是在Firefox下，不支持text-overflow属性，只能简单的隐藏字符串多余的部分。

对Firefox而言，不管是word-wrap:break-word，还是text-overflow:ellipsis，都不支持。简单的解决方案，差不多都是使用overflow:hidden隐藏一下，复杂的解决方案，有很多Hack类的方法，这里就不累述了。