长字符串的换行显示
对中文而言,长字符串不是问题,浏览器本身可以正确的换行,但对于英文字符而言,就可能会突破容器的宽度,影响美观。解决方法并不难,不过要考虑到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类的方法,这里就不累述了。
对中文而言,长字符串不是问题,浏览器本身可以正确的换行,但对于英文字符而言,就可能会突破容器的宽度,影响美观。解决方法并不难,不过要考虑到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类的方法,这里就不累述了。