CSS: 完美解決網頁文字太長(連續英數字)而導致版面破掉的問題 (不使用 WBR)

網頁頁面遇到連續的英數字, 就會沒辦法斷行, 而會一直拉長版面, 造成版面破掉, 一直沒有找到好的解法.

通常做法就是用 overflow:hidden, 或者就是加 <WBR> 來解決, <WBR> 有多常用到, 看我寫了兩篇文章就知道(第一篇關鍵字下的不好, 找不到, 於是又寫了第二篇, 這個加 <WBR> 的 function 還寫了 javascript 版.. 等其它語言版本).. XD

現在看到這篇文章: 完美解決網頁文字太長而導致破版的問題, 看起來是能用 CSS(word-wrap) 解決掉長久來的問題, 不需要塞 <WBR> 就能解決真好~ 🙂

先直接看結論(下述內容轉載自: 完美解決網頁文字太長而導致破版的問題):

需要兩個檔案:

  • CSS: wordwrap class, 於 Firefox 解法需搭配 wordwrap.xml
  • wordwrap.xml

CSS


.wordwrap
{
    word-wrap: break-word;
    -moz-binding: url('wordwrap.xml#wordwrap');

    display: block;
    overflow: auto;
}

  • 第一行：給 IE 看的，讓斷字產生。
  • 第二行：給 Firefox/Mozilla 看的，透過 binding 的方式執行一段 JavaScript，當 Element 套用此 wordwrap 類別時讀取 wordwrap.xml 檔案，裡面有定義一組JavaScript程式可動態執行。
  • 第三行、第四行：wordwrap.xml 裡面定義當 overflow 事件發生時執行一段程式讓文字斷行，所以 display 屬性一定要設定成 block 才有可能引發 overflow 事件（使用 inline 是沒辦法的），而最後的 overflow 就設定成 auto 即可。

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>

使用


<span class="url wordwrap">一個非常長的網址, 或連緒不間斷的英數字.....</span>

相關網頁

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

在〈CSS: 完美解決網頁文字太長(連續英數字)而導致版面破掉的問題 (不使用 WBR)〉中有 3 則留言

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。