Charlie’s path to dEAth

word-wrap:break-word;　和　word-wrap:break-word;　這兩個指令，目前在Firefox瀏覽器裡都還不會有作用。这样长单词在div等容器中就不能强制换行。

发现一个近似的解决办法。就是在需要断行的长单词后面，加上一个汉字或者其他亚洲文字。

比如下面代码在firefox中就不起作用：

<div style=”word-wrap:break-word; word-break:break-all;border: 1px solid black; width:50%;”>
(2R,3R,4R,5S,6S)-2-[(2S,3R,4S,5S)-3,4-dihydroxy-2,5-bis(hydroxymethyl)oxolan-2-yl]oxy-6-(hydroxymethyl)oxane-3,4,5-triol
</div>

如果在末尾加上一个汉字的标点符号“。”，就没问题了。甚至word-wrap和word-break属性都不需要。

<div style=”border: 1px solid black; width:50%;”>
(2R,3R,4R,5S,6S)-2-[(2S,3R,4S,5S)-3,4-dihydroxy-2,5-bis(hydroxymethyl)oxolan-2-yl]oxy-6-(hydroxymethyl)oxane-3,4,5-triol。
</div>

这个中文的句号，在不支持中文的电脑里恐怕不能正常显示。

另外一个属性，overflow: hidden; 会把超出范围的内容隐藏起来，达到保持界面的作用。好处是它是ie mozilla通用的。

Filed by Charlie ZHU at 10:12 am under Uncategorized