2020.02.14 2023.01.10

要素の使い方・サンプルコード

Sara

属性
- グローバル属性
使用例
- ① wbr を指定しない場合
  - ② wbr を指定した場合
  - ③ wbr の位置にハイフンを表示する方法
対応ブラウザ
関連するタグ

要素は、テキストを改行する位置を指定します。
改行の必要がない場合は意味を持ちません。

日本語の場合は一文字が独立しているのでどの位置で改行しても問題ありませんが、英語など長い単語を任意の位置で改行させたい場合に使うことができます。

属性

グローバル属性

全ての HTML 要素に共通して使用できるグローバル属性はこちら

使用例

① wbr を指定しない場合

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit pretium ante a consectetur. Mauris eu ipsum non arcu ornare varius.</p>

実行結果

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit pretium ante a consectetur. Mauris eu ipsum non arcu ornare varius.

② wbr を指定した場合

HTML

<p>Lorem ipsum dolor sit amet, con<wbr>sectetur adipiscing elit. Cras blan<wbr>dit pretium ante a consectetur. Mauris eu ipsum non arcu ornare varius.</p>

実行結果

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit pretium ante a consectetur. Mauris eu ipsum non arcu ornare varius.

③ wbr の位置にハイフンを表示する方法

は改行をするだけなので、単語の途中で改行したことが分かりにくい場合があります。
 の代わりに と書くと、改行した位置に –（ハイフン）を付けることができます。

HTML

<p>Lorem ipsum dolor sit amet, con&shy;sectetur adipiscing elit. Cras bla&shy;ndit pretium ante a consectetur. Mauris eu ipsum non arcu ornare varius.</p>

実行結果

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras blandit pretium ante a consectetur. Mauris eu ipsum non arcu ornare varius.