一直有传说这个是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+ */
}
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无法使用了。
大体就是这些,总之还挺麻烦,有需要的可以认真研究。
还有这篇文章,研究了 如何显示固定宽度的Label,如果文字超过长度就显示...。
这篇文章研究了 表格内长字串的处理,提到了overflow hidden的用法。
还有一个Firefox的扩展叫 Toggle Word Wrap,主动对页面应用css起到折行的效果,好像更新不太积极,fx3无法使用了。
大体就是这些,总之还挺麻烦,有需要的可以认真研究。