基本上,網頁遇到「中文字」超過一行時都可以正常的斷字,只是若是英文字寫了一大串沒有空白的字,就會導致網頁版型被撐開,如下圖例就是因為網址過長而導致網頁被撐版,進而影響頁面的呈現。
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 去看看執行的效果如何。
相關連結