解決網頁文字過長導致破版的問題

如果用家是輸入中文字就不會出現問題,可是如果是輸入很長的英文字,就經常令網頁破版,最近找到一個方法可以解決這個問題。

1.先使用css設定一個class.

.wordwrap
{
word-wrap: break-word;
-moz-binding: url('wordwrap.xml#wordwrap');
display: block;
overflow: auto;
}

LINE 1:
IE支援的功能,所以直接使用就可以解決IE斷字的問題.
LINE 2 :
給Firefox的,透過 binding 的方式執行一段 JavaScript，當 Element 套用此 wordwrap 類別時讀取 wordwrap.xml 檔案，裡面有定義一組JavaScript程式可動態執行。
LINE 3&4 :
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>

3.在html中加入,即可解決問題

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