Blog on 27th Floor

偶然间又看到这个问题，就是太长的单词或连续的英文和数字，中间没有空格隔开的情况，浏览器都不能很好的折行或回行，也就是word break或是word wrap，这似乎是个世界级的难题，以至于IE和Mozilla团队到目前都没有完美解决。

前几天刚看到qyb的贴子，说了<wbr>（word break）这个标签，可以把它插入到想折行的地方，比如长的url链接地址，浏览器碰到它就会自动折行，就不会把布局给破坏了；同样的还有&shy;（soft hephen）和&#8203;这两个字符，浏览器碰到也会折行。这个页面上还显示了3种折行字符的实际效果，可以用自己的浏览器看一下，fx3.0和opera 9.5都支持。可能这个shy字符更好些，用它的话可以拷贝粘贴也不出怪字符。

另外就是在<pre>标签里，段落也不会自动回行，这个在css3里有一定支持，包括Word break和text wrap，有需要的可以研究一下。这一页面也说了如何在pre标签内设定css让长字串在适当的地方回行。

这一页对这种长词回行的问题做了实验，包括表格中和textarea中，IE和Firefox的表现是各有千秋，下面也有一些讨论，可以参考。

还有这篇文章，研究了如何显示固定宽度的Label，如果文字超过长度就显示...。

这篇文章研究了表格内长字串的处理，提到了overflow hidden的用法。

还有一个Firefox的扩展叫Toggle Word Wrap，主动对页面应用css起到折行的效果，好像更新不太积极，fx3无法使用了。

大体就是这些，总之还挺麻烦，有需要的可以认真研究。