<wbr>

更新日
仕様 HTML Living Standard
分類 フロー・コンテンツ / フレージング・コンテンツ
利用場所 フレージング・コンテンツが置ける場所
内容 無し(空要素)

wbr要素は、改行位置の候補を表します。


<wbr>

wbr要素は、折り返しが行われないテキスト(英単語 等)に対して、改行の機会を与えます。

例えば、スペースを入れずに英単語を連続させた場合、通常は右端で折り返されずに領域をはみ出してしまいますが、

<p>LongWordLongWordLongWordLongWordLongWord ...</p>

LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord

wbr要素を次のように配置しておくと、必要に応じて折り返されるようになります。(wbr要素を配置した位置で折り返されます)

<p>LongWord<wbr>LongWord<wbr>LongWord<wbr>LongWord<wbr>LongWord<wbr> ...</p>

LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord

旧HTMLからの変更点
  • HTML5:wbr要素が定義されました。

使用例


<!DOCTYPE html>
<html>
<head>

<title>文書のタイトル</title>

<style>

p {
width: 17em;
border: 1px #cc0000 solid;
}

</style>

</head>
<body>

<p>LongWord<wbr>LongWord<wbr>LongWord<wbr>LongWord<wbr>LongWord<wbr> ...</p>

</body>
</html>

表示例

LongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWordLongWord