HTML <wbr> Tag

• w3schools
• w3c
• whatwg

---

定義及用法 Definition and Usage

<wbr>標籤定義了字元自動換行( line-break )的時機。

---

技巧及備註 Tips and Notes

當一個字太長的時候，瀏覽器會因解析寬度的不同，在不同的字句中斷行，若是你擔心這樣會影響排版，或是讓文字顯示不正常，那麼就可以適時的加入<wbr>來控制換行時機。目前除了IE不支援，其他的瀏覽器都可以使用<wbr>元素。

---

可使用的屬性 Attributes

支援全域屬性(Global Attributes)及事件屬性(Event Attributes)

---

範例 Examples

範例 1 example：

<p> 
To learn Asynchronous JavaScript And XML, you have to _
be familiar with the XML<wbr>Http<wbr>Request Object. </p>
<p> 
To learn Asynchronous JavaScript And XML, you have to _
be familiar with the XMLHttpRequest Object. </p>

Demo結果如下

To learn Asynchronous JavaScript And XML, you have to be familiar with the XMLHttpRequest Object.

To learn Asynchronous JavaScript And XML, you have to be familiar with the XMLHttpRequest Object.

上面範例中的二個句子，在瀏覽器中文字是一樣的，但第一句中加入了<wbr>，所以即便「XMLHttpRequest」是一個word，在自動換行時也會依<wbr>標籤位置去切割。

範例 2 example：

<p> 錦瑟無端五十弦，一弦一柱思華年。_
    莊生曉夢迷蝴蝶，望帝春心托杜鵑。_
    滄海月明珠有淚，藍田日暖玉生煙。_
    此情可待成追憶，只是當時已惘然。_<br /> 
    I want to demo the old question about word-wrap,_
   "Imthefirstwordthatisntexistintheworld _
    Iamthesecondwordthatisntexistintheworld _
    Imthelastwordthatisntexistintheworld"
 </p>

Demo結果如下

錦瑟無端五十弦，一弦一柱思華年。莊生曉夢迷蝴蝶，望帝春心托杜鵑。滄海月明珠有淚，藍田日暖玉生煙。此情可待成追憶，只是當時已惘然。
I want to demo the old question about word-wrap, "ImthefirstwordthatisntexistintheworldIamthesecondwordthatisntexistintheworldImthelastwordthatisntexistintheworld"

在上面這個例子中，英文字的部分超出了我設計的框架外，並沒有自動換行，我只是要試圖說明，<wbr>這個標籤其實應該要和 CSS3 中制定的 word-wrap 一起討論會更讓人了解 (當然，如果你還沒有研究 CSS 的話，這裡就跳過吧。純屬個人意見)

文字自動換行，是一個老生常談的問題了。這是瀏覽器會面對的問題，所以設計了相應的能力，把超出頁面的文字自動傳到下一行，這個就是「word wrap」。

不過，這種設計只限於拼音文字，像中文這樣單體成字的語言系統是沒有這種準則的，範例中，我貼了一首中文詩，理論上我當然希望詩以「句」的方式呈現，不要在句中斷行，但對應的處理程式並沒有針對這樣的設計，當然除非你給他剛剛好的寬度(一行8個全形字)，它自然可以自動切得整齊。

像這樣單體成字的系統，還有日本、韓國，這三個文字被統稱為 CJK(Chinese, Japanese, and Korean)，CJK 在文字呈現的規則上，和非 CJK 有些差別，舉例來說，非 CJK 的通則為(1)單詞不能在中間不合法斷開(除非在斷開處加連接符(2)標點符號不能成為行首；而 CJK 的通則為(1)雙字長的標點符號不能斷開，像破折號、省略號 (2)標點符號不能為行首。

所以<wbr>對於中文來說是不必要的存在。其實對我而言，對英語也是不必要的存在。
範例 2，我還特地寫了一個很長的英文字，可以很清楚的看到，這串英文單字已經超出我用CSS畫的框架中，瀏覽器在預設中設定了規則，為了保證完整的呈現字義，程式上寧可破壞美觀，不因換行自動拆字。就我的觀點來說，這個設計很合理。不過CSS裡頭也可以允許使用者去破壞這個規則，就是設定 word-break 或是 word-wrap 來強行斷開單詞，版面就不會因為文字跑掉。但是用過這類 CSS 的就知道，這是很不必要的舉止。現在 HTML5 裡也新增了類似用途的元素，就是<wbr>。

當然英文單字裡應該不會有像範例 1 中這麼變態長的英文單字，但倘若存在這種單字呢？也許我們要想的，應該不是多設計一個<wbr>元素來把不合理的事情給合理化(如範例 1 ，我覺得不妥)，相反的我們應該想的是，如果有這麼長的單字，你怎麼可以設計一個窄的容器來放他呢？

所以，我猜想IE瀏覽器沒有接納這個標籤的原因，應該是在於這個問題。這個標籤對我來說也是非必要的存在。