＜wbr要素＞ - 改行を許容する場所

公開日: 2017/02/09

wbr要素は、改行の機会を表す要素です。この要素がある位置は、br要素のように必ず改行されるわけではなく、画面幅によって自動的に改行が発生する時に、優先して改行が入る位置となります。

概要

名前: wbr (Word break)
カテゴリー: Flow content; Phrasing content
配置できる場所: Phrasing contentが期待される場所。
コンテンツモデル: 空要素のため、子ノードを持ちません。
タグの省略: 省略できません。
DOM Interface: HTMLElement
仕様書: https://html.spec.whatwg.org/multipage/semantics.html#the-wbr-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>【デモ】＜wbr要素＞ - 改行を許容する場所</title>
		<link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/wbr/">
		<style>
			body {
				background-color: #fff ;
			}
		</style>
	</head>
	<body>

<p>wbr要素は、画面幅によって自動改行が発生する時の、優先的な位置を指定する要素です。画面幅を広げたり狭めたりしてみて下さい。</p>

<h2>wbr要素あり</h2>
<p>aとbの間にwbr要素を配置しました。</p>
<p>aaaaaaaaaaaaaaaa<wbr>bbbbbbbbbbbbbbbb</p>


<h2>wbr要素なし</h2>
<p>aaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb</p>

	</body>
</html>

デモを開く

</head><body>までを含めて下さい。

<!DOCTYPE html> <html> <head> <base href="/626/"> <meta charset="utf-8"> <title>【デモ】＜wbr要素＞ - 改行を許容する場所</title> <link rel="canonical" href="https://syncer.jp/Web/HTML/Reference/Element/wbr/"> </head> <body>

<p>wbr要素は、画面幅によって自動改行が発生する時の、優先的な位置を指定する要素です。画面幅を広げたり狭めたりしてみて下さい。</p> <h2>wbr要素あり</h2> <p>aとbの間にwbr要素を配置しました。</p> <p>aaaaaaaaaaaaaaaa<wbr>bbbbbbbbbbbbbbbb</p> <h2>wbr要素なし</h2> <p>aaaaaaaaaaaaaaaabbbbbbbbbbbbbbbb</p>

</div> <script>...</script> </body> </html>

<style>

body { background-color: #fff ; }

</style>

</script>