wbrタグ

タグ wbr は、ブラウザが（テキストが要素の幅に収まらない場合に）必要に応じて改行を行える位置を示します。そのような改行はソフトハイフネーションと呼ばれます。

終了タグは必要ありません。

タグ wbr を介した単語の分割では、ハイフン "-" は追加されません。もしそれが必要な場合は、ソフトハイフン文字  を使用してください（末尾のセミコロンは必須であり、誤植ではありません）。

ソフトハイフン  は、ブラウザが（必要に応じて）単語を分割し、その際にハイフン "-" を配置できる位置を示します。

プロパティ hyphens の値が none に設定されている場合、ソフトハイフン  は機能しません（しかし wbr による分割は機能します）。

例 . ハイフネーションなしのテキスト

ブロックの境界を超えてはみ出る長い単語を含むテキストサンプルを見てみましょう。ブロックには小さな幅を設定し、長い単語が収まらないようにします：

<div id="elem">
	this is supersupersuperlong text
</div>

#elem {
	width: 200px;
	border: 1px solid black;
}

ここでは、ブラウザが（必要に応じて）単語を分割することを推奨する位置に wbr タグを追加してみましょう（ブラウザは私たちが指定したすべての場所で分割を行うわけではないことに注意してください）：

<div id="elem">
	this is super<wbr>super<wbr>super<wbr>long text
</div>

#elem {
	width: 200px;
	border: 1px solid black;
}

タグ wbr の代わりに、文字  を配置してみましょう。分割位置にはハイフンが表示されます：

<div id="elem">
	this is supersupersuperlong text
</div>

#elem {
	width: 200px;
	border: 1px solid black;
}