# 完美解決網頁文字太長而導致破版的問題
基本上，網頁遇到「中文字」超過一行時都可以正常的斷字，只是若是英文字寫了一大串沒有空白的字，就會導致網頁版型被撐開，如下圖例就是因為網址過長而導致網頁被撐版，進而影響頁面的呈現。
IE 從 5.5 ~ 8.0 版的 CSS 都有支援一個 [word-wrap](http://msdn.microsoft.com/en-us/library/ms531186\(VS.85\).aspx) 屬性，當你指定屬性值為 break-word 時就可以強迫瀏覽器進行斷字的動作，這樣就可以避免文字被斷行了。
不過要在 Firefox 中使用 word-wrap 就不可行了，一直到前天才正式發佈的 [Firefox 3.0](http://www.mozilla.com/en-US/firefox/) 也還是不支援 word-wrap 屬性，不過 word-wrap 屬性已經被編進 [CSS 3.0](http://www.w3.org/TR/css3-roadmap/) 的規格中了，相信遲早有一天可以支援的。
不過在 Firefox 中也不是完全沒辦法，網路上[有篇文章](https://web.archive.org/web/20170920155558/http://blog.stchur.com:80/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/)就有寫到如何在 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 檔案
> ```
>
>
>
>
>
> //
> 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, '');
> }
>
> //]]>
>
>
>
>
> ```
>
> 內容我就不詳述，請自行到 [Emulating CSS word-wrap for Mozilla/Firefox](https://web.archive.org/web/20170920155558/http://blog.stchur.com:80/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/) 閱讀相關說明。
3\. 最後，到你的 HTML 中會破版的那個標籤套上 wordwap 類別即可。
> ```
> 一個非常長的網址.....
> ```
在我的例子裡，套用之後在 Firefox 中的顯示效果如下：
[](https://stwillblogassets.blob.core.windows.net/files/images/external/stwillblogassets.blob.core.windows.net/b62bebc54cb36b3937e0-image_8.png)
就這樣三個步驟就可以達成完美、跨瀏覽器的自動斷字功能。這裡有個線上的 DEMO，你們可以用 Firefox 去看看執行的效果如何。
**相關連結**
- MSDN Library - [word-wrap Attribute | wordWrap Property](http://msdn.microsoft.com/en-us/library/ms531186\(VS.85\).aspx)
- [Cascading Style Sheets (CSS), Level 3 (CSS3)](http://www.w3.org/TR/css3-roadmap/)
- [Emulating CSS word-wrap for Mozilla/Firefox](https://web.archive.org/web/20170920155558/http://blog.stchur.com:80/2007/02/22/emulating-css-word-wrap-for-mozillafirefox/)