星期六, 六月 28, 2008

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>

相關網頁

作者 jon ( Programming ) :: 迴響 (3) :: 靜態連結網址

相關標籤

this is comment icon 感恩~ [回覆]

還沒去測試火狐
但還是非常感謝提供解決的方法~~~~~

Comment by Ava (12/26/2008 16:57)

this is comment icon 對於超鏈結 [回覆]

對於a href...

此功能將被打回成一個個字元

Comment by 測試者 (11/25/2009 12:56)

this is comment icon 回 測試者 [回覆]

在 a 無法執行?

Comment by Tsung (11/25/2009 13:47)
Add this page to del.icio.us

發表迴響

標題

內容 (限制 1000 字)

暱稱

電子郵件

個人網頁


 authimage


PS: 若無法留言, 請先確認是否有打開 JavaScript, 造成您的困擾, 實在萬分對不起 Orz...(如果無法留言, 勞煩可以發信給我好嗎? 謝謝.)
PS2: 若您的留言被誤判, 我都會再自行看過, 不需要一直重覆張貼~