#HTML(HTML5):字詞分行

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

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

wbr:字詞方行

wbr.html

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

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

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

無法完美放入的時候:
wbr2.pngwbr2.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
Categorie:
Per informazioni complete sulle ottimizzazioni del compilatore, consultare l'Avviso sull'ottimizzazione