網頁頁面遇到連續的英數字, 就會沒辦法斷行, 而會一直拉長版面, 造成版面破掉, 一直沒有找到好的解法.
通常做法就是用 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>