如何在Firefox中实现自动断字的方法

 在最新的firefox(3.5+)上已经支持word-wrap了,参考https://developer.mozilla.org/En/CSS/Word-wrap

 

Browser compatibility

Browser	Lowest version
Internet Explorer	5.5
Firefox (Gecko)	3.5 (1.9.1)
Opera (Presto)	10.5 (2.3)
Safari | Chrome | WebKit	1.0 | 1.0 | 85

• word-wrap:break-word can be used to work around lack of pre{white-space:pre-wrap} support in IE 5.5-7. See white-space for an example.
• IE8 introduced -ms-word-wrap as a synonym for word-wrap. Don't use the -ms- prefix.

 

基本上，网页遇到「中文字」超过一行时都可以正常的断字，但是对于英文在IE和firefox断字，在IE下用 word-wrap: break-word;就行了，但在firefox下若是英文字写了一大串没有空白的字，就会导致网页被撑开，如下面例就是因英文的文本过长而导致网页被撑开，从而影网页版面的美观。

IE 从 5.5 ~ 8.0 版的 CSS 都支持一个 word-wrap 属性，当你指定属性值为 break-word 时就可以强迫浏览器进行断字的动作，这样就可以避免文字被断行了。

不过要在 Firefox 中使用 word-wrap 就不可行了，一直到前天才正式发佈的 Firefox 3.0 也还是不支援 word-wrap 属性，不过 word-wrap 属性已经被编进 CSS 3.0 的规格中了，相信迟早有一天可以支援的。

不过在 Firefox 中也不是完全没办法，网路上有篇文章就有写到如何在 Firefox 中实现自动断字的方式，有兴趣的可以上去看看。

我这裡摘要一下要达到目的必须的步骤：

1. 在 CSS 中定义一个 wordwrap 类别

1 .wordwrap
2 {
3     word-wrap: break-word;
4     -moz-binding: url('wordwrap.xml#wordwrap'); 
5 
6     display: block;
7     overflow: auto;
8 }
 

这几行 CSS 定义都是有意义的，内容这四行我大致解释一下：

第一行：给 IE 看的，让断字产生。

第二行：给 Firefox/Mozilla 看的，透过 binding 的方式执行一段 JavaScript，当 Element 套用此 wordwrap 类别时读取 wordwrap.xml 档桉，裡面有定义一组JavaScript程式可动态执行。

第三行、第四行：wordwrap.xml 里面定义当 overflow 事件发生时执行一段程式让文字断行，所以 display 属性一定要设定成 block 才有可能引发 overflow 事件（使用 inline 是没办法的），而最后的 overflow 就设定成 auto 即可。

 

2. 新增一个 wordwrap.xml 档案

内容我就不详述，请自行到 Emulating CSS word-wrap for Mozilla/Firefox 阅读相关说明。

3. 最后，到你的 HTML 中会破版的那个标籤套上 wordwap 类别即可。

<span class="url wordwrap">一个非常长的网址.....</span>

在我的例子裡，套用之后在 Firefox 中的显示效果如下：

就这样三个步骤就可以达成完美、跨浏览器的自动断字功能。这裡有个线上的 DEMO，你们可以用 Firefox 去看看执行的效果如何。