<wbr>タグの解説
<wbr>は、連続するテキストの中でブラウザが任意で改行してよい位置を指定します。要素の幅が足りている時は改行せず、足りなくなった時に折り返す地点に影響します。
通常、画面の端に文章が到達した場合、ブラウザは直近の位置で改行を行います。しかし、長い単語やひとつながりのフレーズが意図しない箇所で改行されてしまうと、可読性が低下したり意味が損なわれてしまう可能性があります。このタグは、それを避けるために開発者が改行位置を提案するためのものです。
<wbr>要素の内部は、周囲のテキストの一部とはみなされません。スクリプトを通じてこの要素に何らかのコンテンツを生成する場合、その結果に利用できる特徴であるかもしれません。
UTF-8エンコードを採用した環境では、<wbr>の置かれた箇所はU+200B ZERO-WIDTH SPACEと同じ振る舞いをします。この要素はunicode-bidiにおいて制御文字として扱われるので、改行が発生しない状態では書字方向の双方向性に影響を与えません。
<wbr>タグの特徴
- レイアウトの初期値はインライン要素です。文章の改行に影響を与えるかどうかは、要素の幅とコンテンツの内容によります。
- 視覚的な効果は与えられません。改行する位置を暗黙的に提案するだけです。
- この要素は空要素です。開始タグのあとに終了タグを記述する必要はありません。
<wbr>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<wbr>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。連続するテキストの中で自動的な折り返しが発生する場合に、優先的に改行位置の候補として扱ってほしい場所に配置します。
text<wbr>text.
要素の幅を狭めていった時に、<wbr>を設置した段落と設置しなかった段落で、改行位置がどのように変わるのかを比較してみましょう。
<div class="sample-block">
<p>ABCDEFGHIJKLMNOPQRSTUVWXYZ.</p>
<p>ABCDEFG<wbr>HIJKLMN<wbr>OPQRSTU<wbr>VWXYZ.</p>
</div>
.sample-block {
word-wrap: normal;
}
既定値では、連続するアルファベットは一つの単語とみなされるため折り返しが発生しません。<wbr>を使用すると、このように要素からテキストがはみ出す問題を解消できます。
続いて、段落にword-wrapプロパティのanywhere値を与えて一文字単位で折り返される場合の表示を確認します。
.sample-block {
word-wrap: anywhere;
}
一文字単位で折り返しが発生する場合、単語の途中や文章の中途半端な位置など改行が発生してほしくない所でも折り返されてしまいます。それを改行位置の候補を事前に用意しておくことで解消できます。
日本語で<wbr>を使うときの問題点を解決する
日本語で書かれた文章は、英語のように半角スペースで区切られることがないため、基本的には一文字単位で折り返した方が都合が良いと言えます。しかし、特定の範囲で改行をコントロールしたい場合に<wbr>を利用しても想定通りに表示されないことがあります。
この問題を解決するために以下の例を見てみましょう。HTMLの内容は全て共通しています。異なるのはCSSのプロパティの値です。
改行に関するプロパティにおいて、一番左のブロックはブラウザの既定値で表示されています。真ん中のブロックにはword-breakプロパティのkeep-allが追加されています。そして一番右のブロックには、さらにoverflow-wrapプロパティのanywhereが追加されています。
ここで、画面に表示されているスライダーを動かして文字の大きさを変えてみて下さい。文字を大きくしていった時、各ブロックの文字はどの位置で折り返されるでしょうか。
既定値では、ブラウザは日本語の文字列を一文字単位で折り返します。そのため、単語の途中であっても無条件で改行されてしまいます。そこで、想定しない位置で折り返しが発生しないようにword-breakプロパティのkeep-allを指定するのですが、今度は句読点や<wbr>を配置した箇所以外が折り返されなくなってしまいます。すると、文字を大きくしていくにつれて要素の幅がどんどん広がっていくため、左右のブロックを圧迫してしまいます。
そこで、overflow-wrapプロパティのanywhereを加えてバランスを取ります。右のブロックでは内容が要素の端から溢れてしまいそうになった場合に、ブラウザが自動で折り返すべきかどうかを判別します。
この方法は、見出しやキャッチコピーなどの折り返しを厳密に管理したい箇所や、フォントサイズの大きなパーツを扱うブロックで活用できます。後は文章の量に応じて<wbr>の配置位置を変えていくだけです。
<div class="sample-block">
<section>
<h2>normal</h2>
<p>あのイーハトーヴォの<wbr>すきとおった風、夏でも底に冷たさをもつ<wbr>青いそら、うつくしい森で飾られた<wbr>モリーオ市、郊外の<wbr>ぎらぎらひかる<wbr>草の波。</p>
</section>
<section class="wb-keep-all">
<h2>+ word-break</h2>
<p>あのイーハトーヴォの<wbr>すきとおった風、夏でも底に冷たさをもつ<wbr>青いそら、うつくしい森で飾られた<wbr>モリーオ市、郊外の<wbr>ぎらぎらひかる<wbr>草の波。</p>
</section>
<section class="wb-keep-all of-anywhere">
<h2>+ overflow-wrap</h2>
<p>あのイーハトーヴォの<wbr>すきとおった風、夏でも底に冷たさをもつ<wbr>青いそら、うつくしい森で飾られた<wbr>モリーオ市、郊外の<wbr>ぎらぎらひかる<wbr>草の波。</p>
</section>
</div>
.sample-block {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
min-width: 600px;
margin-block-start: 1rem;
overflow: scroll;
}
.sample-block section {
display: grid;
grid-template-rows: subgrid;
grid-row: span 2;
padding: 1rem;
background-color: #ccc;
}
.sample-block h2 {
margin: 0;
font-size: 1rem;
}
.sample-block p {
padding: 0.5em;
margin: 0;
background-color: #f8f8f8;
}
.sample-block .wb-keep-all {
word-break: keep-all;
}
.sample-block .of-anywhere {
overflow-wrap: anywhere;
}