#HTML(HTML5):字詞分行

灆洢 2013-11-07 21:29:53

在HTML裡面,如果打了太長的一連串的英文字,瀏覽器會把它當作一個詞彙,並且不會在空間狹小的時候做分行(除非中間有-,?……等等之類的分隔符,會在分隔符處分行)。不過我們平常打中文沒有這個問題,中文一個一個字,中間就算沒空白也會以字為單位去做分行。但是就算打英文文章,好似也很少遇過會有一個單字長到完全裝不下的情形。其實是真有這情況會需要,那就是網址,網址中間通常都不會有分隔符,而偏偏又得連在一起,就會導致以下的結果:
wbr.png

那該怎麼做去解決這個問題呢?就利用wbr標籤吧!

wbr:字詞方行

...
  http://this<wbr />.is<wbr />.a<wbr />.really<wbr />.long<wbr />.example<wbr />.com/With<wbr />/deeper<wbr />/level<wbr />/pages
...

以上是個例子,我們在我們認定可以斷行的地方去加上wbr標籤,瀏覽器就會在裝該文字的容器塞不下的時候選擇適當的wbr標籤去斷行。若文字能夠完美得塞進容器內那就不會進行斷行。

可完美放入的時候:
wbr1.png

無法完美放入的時候:
wbr2.png

(此範例對於網址的分段方法是依照DevDocs上所言The Yahoo Style Guide的分行方法。)

參考資料

  1. DevDocs:http://devdocs.io/html/
  2. w3schools.com > HTML <wbr> Tag:http://www.w3schools.com/tags/tag_wbr.asp

在〈“#HTML(HTML5):字詞分行”〉中有 1 則留言

  1. […] 繼上篇我在HTML的部分利用<wbr />進行手動式的字詞分行,有的時候確實令人覺得麻煩,是否可以讓瀏覽器在察覺會超出容器時自動進行分行呢?有的!必須利用CSS,而且還有兩種不同的做法,底下我就來講解這兩種做法該如何使用並且這之間有什麼差別。 […]

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料