关于firefox文本折行的问题

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

 

然后就是看到了有说用JS 来写的比如加上一长串正则表达式的JS（看不懂），也有用在文本中加入换行符的JS，甚至还有说用overflow：hidden来写，这不是搞笑么？人家是要换行，你把内容隐藏掉了算什么？然后一一试过，正则表达式在容器内也就是<td>里面不起作用，换行符不能完美解决问题，很多时候会出现很莫名的效果，尤其是在文本内是html格式的（即非所见即所得的样式，即原始格式，即非经过bbcodeparser转换过的样式）时候，所以很困扰。

 

终于，昨天貌似找到一个很不错的方法，即用CSS模式来控制<td>里面的标签<pre>内的文本折行：即添加一个叫做pre-wrap.css的文件，里面的代码如下：

/* Browser specific (not valid) styles to make preformatted text wrap */
pre {
 white-space:   -hp-pre-wrap;   /*   HP   printers   */
 white-space:   pre-wrap;   /*   CSS   2.1   */
 white-space:   pre;   /*   CSS2   */
 white-space:   pre-line;   /*   CSS   3   (and   2.1   as   well,   actually)   */
 white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 white-space: -pre-wrap;      /* Opera 4-6 */
 white-space: -o-pre-wrap;    /* Opera 7 */
 word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

一目了然，呵呵，然后应用到页面上，貌似OK了，不过还得有后续实验的检测才能确定是否是最终方案

 

另外：

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

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

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

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

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