基本上，網頁遇到「中文字」超過一行時都可以正常的斷字，只是若是英文字寫了一大串沒有空白的字，就會導致網頁版型被撐開，如下圖例就是因為網址過長而導致網頁被撐版，進而影響頁面的呈現。
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 類別
.wordwrap
{
word-wrap: break-word;
-moz-binding: url('wordwrap.xml#wordwrap');
display: block;
overflow: auto;
}這幾行 CSS 定義都是有意義的，內容這四行我大致解釋一下：
第一行：給 IE 看的，讓斷字產生。
第二行：給 Firefox/Mozilla 看的，透過 binding 的方式執行一段 JavaScript，當 Element 套用此 wordwrap 類別時讀取 wordwrap.xml 檔案，裡面有定義一組JavaScript程式可動態執行。
第三行、第四行：wordwrap.xml 裡面定義當 overflow 事件發生時執行一段程式讓文字斷行，所以 display 屬性一定要設定成 block 才有可能引發 overflow 事件（使用 inline 是沒辦法的），而最後的 overflow 就設定成 auto 即可。
2. 新增一個 wordwrap.xml 檔案
<?xml version = "1.0"?>
<bindings xmlns = "http://www.mozilla.org/xbl" xmlns:html = "http://www.w3.org/1999/xhtml">
<binding id="wordwrap" applyauthorstyles="false">
<implementation>
<constructor>
//<![CDATA[
var elem = this;
elem.addEventListener('overflow',
function()
{
var exp = /<​\/*[​_\s="'\w]+>/g;
var txt = elem.innerHTML;
var chars = txt.split('');
var newTxt = chars.join('​');
newTxt = newTxt.replace(exp, reconstructTag);
elem.innerHTML = newTxt;
},false);
function reconstructTag(_tag)
{
return _tag.replace(/​/g, '');
}
//]]>
</constructor>
</implementation>
</binding>
</bindings>內容我就不詳述，請自行到 Emulating CSS word-wrap for Mozilla/Firefox 閱讀相關說明。
3. 最後，到你的 HTML 中會破版的那個標籤套上 wordwap 類別即可。
<span class="url wordwrap">一個非常長的網址.....</span>
在我的例子裡，套用之後在 Firefox 中的顯示效果如下：
就這樣三個步驟就可以達成完美、跨瀏覽器的自動斷字功能。這裡有個線上的 DEMO，你們可以用 Firefox 去看看執行的效果如何。
相關連結