HTML5 新元素 <wbr>

wbr 表示一個斷行的可能時機,例如在網頁中顯示一段連續長字串,在預設的情形下,超出邊界的部份會被直接折到第二行呈現,如果想要指定的地方折行,則斷行的地方配置 <wbr> 即可,如此一來當字串超出邊界時,便會自動在 wbr 元素配置的位置斷行。考慮以下的配置:

ABCDE,FGHIJ,KLMNO,PQRST,UVWXYZ,abcde,fghij,klmno,pqrst,uvwxyz

ABCDE,FGHIJ,KLMNO,PQRST,UVWXYZ,abcde,fghij,klmno,pqrst,uvwxyz

第一組英文字母組成的長字串中,每個逗點分隔的部份,均配置了一個 wbr 元素,第二組英文字母則未配置,因此第一組字串於寬度不足顯示時,會在逗點的部份適當的斷行,第二組字串則只有在長度不足的情形下才作折行,以上內容所需的設計如下:

<p>ABCDE,<wbr>FGHIJ,<wbr>KLMNO,<wbr>PQRST,<wbr>UVWXYZ,<wbr>abcde,<wbr>fghij,<wbr>klmno,<wbr>pqrst,<wbr>uvwxyz</p>

<p>ABCDE,FGHIJ,KLMNO,PQRST,UVWXYZ,abcde,fghij,klmno,pqrst,uvwxyz</p>

如你所見,第一組於每一個逗點均配罝了<wbr>因此會在遏點處適當的斷行。


沒有留言: