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

基本上，網(wǎng)頁遇到「中文字」超過一行時(shí)都可以正常的斷字，但是對(duì)于英文在IE和firefox斷字，在IE下用 word-wrap: break-word;就行了，但在firefox下若是英文字寫了一大串沒有空白的字，就會(huì)導(dǎo)致網(wǎng)頁被撐開，如下面例就是因英文的文本過長(zhǎng)而導(dǎo)致網(wǎng)頁被撐開，從而影網(wǎng)頁版面的美觀。

IE 從 5.5 ~ 8.0 版的 CSS 都支持一個(gè) word-wrap 屬性，當(dāng)你指定屬性值為 break-word 時(shí)就可以強(qiáng)迫瀏覽器進(jìn)行斷字的動(dòng)作，這樣就可以避免文字被斷行了。

不過要在 Firefox 中使用 word-wrap 就不可行了，一直到前天才正式發(fā)佈的 Firefox 3.0 也還是不支援 word-wrap 屬性，不過 word-wrap 屬性已經(jīng)被編進(jìn) CSS 3.0 的規(guī)格中了，相信遲早有一天可以支援的。

不過在 Firefox 中也不是完全沒辦法，網(wǎng)路上有篇文章就有寫到如何在 Firefox 中實(shí)現(xiàn)自動(dòng)斷字的方式，有興趣的可以上去看看。

我這裡摘要一下要達(dá)到目的必須的步驟：

1. 在 CSS 中定義一個(gè) 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 定義都是有意義的，內(nèi)容這四行我大致解釋一下：

第一行：給 IE 看的，讓斷字產(chǎn)生。

第二行：給 Firefox/Mozilla 看的，透過 binding 的方式執(zhí)行一段 JavaScript，當(dāng) Element 套用此 wordwrap 類別時(shí)讀取 wordwrap.xml 檔桉，裡面有定義一組JavaScript程式可動(dòng)態(tài)執(zhí)行。

第三行、第四行：wordwrap.xml 里面定義當(dāng) overflow 事件發(fā)生時(shí)執(zhí)行一段程式讓文字?jǐn)嘈?，所?display 屬性一定要設(shè)定成 block 才有可能引發(fā) overflow 事件（使用 inline 是沒辦法的），而最后的 overflow 就設(shè)定成 auto 即可。

2. 新增一個(gè) wordwrap.xml 檔案

內(nèi)容我就不詳述，請(qǐng)自行到 Emulating CSS word-wrap for Mozilla/Firefox 閱讀相關(guān)說明。

3. 最后，到你的 HTML 中會(huì)破版的那個(gè)標(biāo)籤套上 wordwap 類別即可。

<span class="url wordwrap">一個(gè)非常長(zhǎng)的網(wǎng)址.....</span>

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

就這樣三個(gè)步驟就可以達(dá)成完美、跨瀏覽器的自動(dòng)斷字功能。這裡有個(gè)線上的 DEMO，你們可以用 Firefox 去看看執(zhí)行的效果如何。