wbr 要素折返し可能な箇所を指定する
wbr 要素はテキストの折返しが可能な箇所を指定します。
通常、テキストが表示領域の横幅に達すると、そこで折り返して表示されますが、例えば英単語は途中での折り返しが禁止されているため、長い英単語が表示領域の横幅を超えても、折り返しが発生しません。このような場合に、本来折り返しが禁止されている箇所でも、wbr 要素を記述することで、その場所での折り返しを許可します。
wbr 要素は折り返しを許可するだけですので、実際にそこで折り返しが発生するかは、表示領域の横幅やテキストの分量、文字サイズなどに依存します。
wbr 要素の仕様
- カテゴリ
- コンテンツモデル
- この要素を使用できる文脈
フレージング・コンテンツが期待される場所
- この要素で使用できる属性
wbr 要素のサンプルソース
<!-- 1行が長いソースコードなどで、折り返してもよい箇所を示した例 -->
<pre>
<code class="language-javascript">
(function() {
var po = document.createElement('script'); <wbr />po.type = 'text/javascript'; <wbr />po.async = true;
po.src = 'sample.js';
var s = document.getElementsByTagName('script')[0]; <wbr />s.parentNode.insertBefore(po, s);
})();
</code>
</pre>
主要ブラウザの対応
| IE11 | ○ |
|---|---|
| Edge（EdgeHTML） | ○ |
| Edge（Chromium） | ○ |
| Chrome | ○ |
| Firefox | ○ |
| Safari | ○ |
| iOS Safari | ○ |
| Android Chrome | ○ |