The Will Will Web

記載著 Will 在網路世界的學習心得與技術分享

完美解決網頁文字太長而導致破版的問題

基本上,網頁遇到「中文字」超過一行時都可以正常的斷字,只是若是英文字寫了一大串沒有空白的字,就會導致網頁版型被撐開,如下圖例就是因為網址過長而導致網頁被撐版,進而影響頁面的呈現。

image

IE 從 5.5 ~ 8.0 版的 CSS 都有支援一個 word-wrap 屬性,當你指定屬性值為 break-word 時就可以強迫瀏覽器進行斷字的動作,這樣就可以避免文字被斷行了。

image

不過要在 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 = /<&#8203;\/*[&#8203;_\s="'\w]+>/g;
                    
                    var txt = elem.innerHTML;
                    var chars = txt.split('');
                    var newTxt = chars.join('&#8203;');                    
                    newTxt = newTxt.replace(exp, reconstructTag);                    
                    elem.innerHTML = newTxt;
                },false);
                
                function reconstructTag(_tag)
                {
                    return _tag.replace(/&#8203;/g, '');
                }

            //]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

內容我就不詳述,請自行到 Emulating CSS word-wrap for Mozilla/Firefox 閱讀相關說明。

3. 最後,到你的 HTML 中會破版的那個標籤套上 wordwap 類別即可。

<span class="url wordwrap">一個非常長的網址.....</span>

在我的例子裡,套用之後在 Firefox 中的顯示效果如下:

image

就這樣三個步驟就可以達成完美、跨瀏覽器的自動斷字功能。這裡有個線上的 DEMO,你們可以用 Firefox 去看看執行的效果如何。

相關連結