css 连续字符自动换行的解决方案
发布时间:01/15 来源: 浏览:
关键词:
对文本的处理新增了两个新属性word-wrap和word-break来解决这个问题:
{word-break:break-all;} :依照亚洲语言和非亚洲语言的文本规则,允许在字内换行,且允许非亚洲语言文本行的任意字内断开
{word-wrap:break-word;}: 内容将在边界内换行,如需要则词内换行(word-break)也行发生
IE6/7/8[1] | Firefox2/3[2] | Firefox3.5 | Opera9+ | Safari9.5+/Chrome | |
---|---|---|---|---|---|
{word-wrap:break-word;} | td元素需设置其宽度 见例4和例5 |
不支持 | 不支持td元素 见例4和例5 |
不支持 | 不支持td元素 见例4和例5 |
{word-break:break-all;} | 不支持连续的符号 见例3 |
不支持 | 不支持连续的符号 见例3 |
不支持 | 支持 |
1] 在MSDN的CSS Compatibility and Internet Explorer中可以看出,IE8会像IE6和IE7一样支持word-wrap和word-break这两个属性,但我在IE8beta2上测试来看却不支持这两项,由于IE8还处于beta阶段,且我相信IE8最终会支持的,所以在页头声明<meta content="IE=7" http-equiv="X-UA-Compatible" />使IE8按照IE7来解释页面是一个不错的办法。IE8正式版支持
[2] Firefox3.1将会支持word-wrap属性Firefox3.5beta4已经支持
由于{word-break:break-all;}导致英文和数字可读性严重下降且无法使连续符号换行,所以{word-wrap:break-word;}是一个相对较好的选择。需要注意的是各个浏览器中word-wrap在td上实现不一致,所以避免直接在td上使用。
但面对浏览器的如此糟糕支持,所以不能不借助JavaScript来解决这个问题,即当浏览器不支持CSS解决方案时,在连续字符串的适当位置插入​字符(当然还可以用<wbr />和­,这三个字符在浏览器中的支持情况请看ppk的《The wbr tag》),这些字符写在浏览器中不会显示,却使长字符串换行。​和­都会导致复制用其处理过的文本时有大量不可打印的字符,导致字符数急剧增大,更严重的是导致复制的链接字符串不可用,所以用<wbr />是比较好的方案,虽然<wbr />在IE8中不被支持且在Safari中有bug,但这些浏览器可以直接用CSS{word-wrap:break-word}来实现无需用<wbr />处理。Opera下要兼容<wbr />,需要设置CSS:wbr:after { content: "