2008-03-07 17:52:07 幸福泡沫

<wbr>是什麼?

之前遇到過貼圖不成功
原因都是圖片網址多了<wbr>
所以上網GOOGLE一下
整理並提供給大家:<wbr>是什麼?

<WBR>基本上是類似<br>的語法,不接受任何屬性設定,也沒有對應的結尾標籤。


有人輸入一長串的連續數字,造成整個頁面過長,造成版面被撐開。在IE裡面,你可以使用word-break屬性來強制換行,不過這個屬性FireFox卻不認得,為了讓FF也能夠強制換行,<wbr>是你可以選擇的方式。

解決換行的方法,你可以在每10個字後面加上<wbr>,或加個空白也行( ),但空白加進去會有點怪,就能在該斷的時候斷行,不該斷的時後仍維持一整行,<wbr>不過在IE5當中,<wbr>看來似乎必須在<nobr>標籤當中才可以作用。關於 更多的資訊以及瀏覽器測試狀況請參考The wbr tag以及<wbr>


WBR 的作用:you can break HERE if you want,就是說瀏覽器會判斷是否此處已經在最邊框,若已經在最邊框,有 <wbr>的 tag 的話就會斷行,否則就不會(這也是為何不用 <br> 而要使用 <wbr> 的原因)。

此種狀況會發生的情況只有以下幾種:

整串數字(沒有任何空格)
整串英文(沒有任何空格)
整串 英文、數字、點 混合(ex: url)
此問題是 broswer 判斷的問題,在你沒有任何空白分隔的狀況下,broswer 也不敢給你亂斷行,若你那是一個單字,ex:i18n,被斷行了,在讀的時後就蠻奇怪的。而此問題對中文和正常的英文文章不會有此問題,中文瀏覽器可以自行判斷,英文可以依照空白分格來辨認多長是一個單字.

PS: 若不想斷行,可以考慮另一個相反的 tag: <NOBR>,來包住輸出的字,就不會被瀏覽器斷行。

節錄自:

PHP: 文字過長加入 WBR tag function « 就是愛程式
http://0rz.tw/033J2


其他參考資料:

Tsung's Blog | PHP: 文字過長加入 WBR tag function
http://plog.longwin.com.tw/my_note-programming/2006/07/22/inswbr_tag_function_2006

WBR 元素 | wbr
http://www.olteaching.com/file/dhtml/DHTMLref/objects/WBR.html

(悄悄話) 2008-03-08 17:53:55