網頁過長內容斷行問題

處理動態網頁時,來自使用者自由輸入的部份有時會造成版面破壞。最常見的例子是一串沒有空白的拉丁字元,通常是url。也經常發生在使用者雖然加了半形標點符號卻沒有加上空白的情形。當然也有就是來破版的,故意打上一整串連續字母。以下找到一些部份解決辦法,但全部都不是for all browser的作法,真的很在意版面的話可能要衡量綜合各種作法造成的效能浪費和網頁變肥等等問題加以取捨。

  • IE5.5+
    使用css style {word-wrap:break-word;}
    此style的區塊一定要指定width或display:block。依照規格說明,在必要的時候也會在單字中間作word break,但實際在結構比較複雜的版面測試時不知為何還是會把表格框線撐開。要確保一定不會炸框,大絕招是使用 {word-break:break-all;}。但這招用下去只要碰到邊界一定會斷字,版面會很整齊,但如果是拉丁語系為主的文章閱讀性會降低。照規格word-wrap只有IE5.5+/win和safari1.3+ only,但firefox2好像也是可以用的,css3的文件裡面似乎已經將word-wrap列入標準的樣子。
  • wbr標籤
    我孤陋寡聞現在才知道有這個東西。正如參考的網頁所說,這是一個好用的標籤但是可惜沒幾個人知道。把<wbr/>加在內容中間的效果是,由瀏覽器決定要不要在這裡換行。也就是說只要在所有字之間都塞入就可以做到{word-break:break-all}的效果。當然這也表示塞過的部份網頁肥度上升了好幾倍…。事實上只要在標點處置入或者每隔20到30字元置入一個效果應該就不差了。這個標籤支援IE5.5+和firefox,但不支援safari跟opera。更詳細的資訊可以參考這篇文章另外一篇也有善心人士寫好的字串處理函式可用。

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>