英語の多いWebページを作成しているとき、改行ができずにどうしても文章が長くなってしまうことがありますよね？しかしHTMLの要素には、長文を適度に改行できる要素があるのをご存じですか？
今回は、wbrタグの
・wbrタグと類似するbrタグとの違い
・wbrタグの実用的な使い方
について説明します。
目次
wbrタグとは
wbrタグの読み方
wbrタグ：（読み方）ダブリュービーアールタグ
wbrタグの説明
wbrタグは、”改行可能”であることを示すタグです。主に英語のアルファベットのみで書かれた文章で用い、適度に文章を改行させます。
wbrタグで利用できる属性
wbrタグではHTML全要素で使用可能なグローバル属性のみが使用可能です。
| 属性 | 説明 |
|---|---|
| accesskey属性 | キーボードのショートカットの生成し、簡易なアクセスを可能にする |
| class属性 | 要素に任意の名称を与える（同じclass名を複数の要素に与えられる） |
| dir属性 | テキストの書字方向を示す ・ltr：「left to right」左から右 ・rtl：「rght to left」右から左 ・auto：自動的に書字方向を決定する |
| hidden属性 | 要素に関連性がないことを示す |
| id属性 | 要素に任意の名称を与える（同じidは使用できない：一意性） |
| lang属性 | 要素の言語を定義する |
| style属性 | 要素にCSSスタイル宣言を適用する |
対応ブラウザ
対応ブラウザは以下の通りです。
| PC用ブラウザ | 対応状況 |
|---|---|
| Chrome | 1 |
| Edge | 79 |
| Firefox | 1 |
| nternet Explorer | 未対応 |
| Opera | 11.6 |
| Safari | 4 |
| スマートフォン用ブラウザ | 対応状況 |
| Android webview | 完全対応 |
| Android版Chrome | 完全対応 |
| Android版Firefox | 4 |
| Android 版 Opera | 動作未確認 |
| iOS版Safari | 動作未確認 |
| Samsung Internet | 完全対応 |
wbrタグの基本的な使い方
wbrタグの使い方
wbrタグは改行したい位置に挿入して使用します。開始タグは必須ですが、終了タグ</wbr>は必要ありません。改行タグとして馴染みのある<br>タグと同じように使用します。
See the Pen
wbrタグ 基本 by rabbittyu (@rabbittyu)
on CodePen.
2つの文章がありますが、上は最後まで表示されずに切れてしまっています。しかし2行目は改行しても良い位置をwbrタグで示してあるため、適度に改行され、全ての文章が表示されているのです。
wbrタグと類似する要素との違い
ここでbrタグとwbrタグの違いをご説明します。2つのタグの決定的な違いは、強制的な改行か否かです。
wbrタグは改行の「可能」位置を指定し、brタグは「改行」位置を指定します。brタグは使用することで強制的に改行されますが、wbrタグはあくまでも改行可能な位置を示すだけなので、ブラウザが必要としないまでは改行されません。
・wbrタグ -> 改行可能位置を指定する
wbrタグの応用的な使い方
実はwbrタグには長い文章を改行するだけでなく、URLやパス名を改行するという使い方もあります。多くの方は日本語でサイトを作成すると思うので、こちらの使い方の方が良く使用するのではないでしょうか？
See the Pen
wbrタグ 応用 by rabbittyu (@rabbittyu)
on CodePen.
上の例ではリンクと文章を合わせて表記してあります。リンクはaタグ内のhref属性内に書き、リンクの詳細を<a></a>で囲います。
wbrタグはリンクの詳細の文章内で使用します。もうわかっているかもしれませんが、wbrタグは文章内には表示されず、文章内の1文字にもカウントされません。
wbrタグと同じ役割をハイフンで補う方法
またwbrタグを使用する以外にも、適切に改行させる方法があります。実際に例を見て確認してみましょう。
See the Pen
wbrハイフン by rabbittyu (@rabbittyu)
on CodePen.
ここではwbrタグの代わりに、ハイフンを示す『­』を挿入しました。先ほど基本編で紹介したwbrタグの使用方法と比べると、改行位置にはハイフンが表示されています。こちらも改行の有効な方法なので、覚えておきましょう。
まとめ
今回は適度に改行位置を指定するwbrタグを紹介しました。wbrタグはbrタグとは異なり、表示環境やブラウザのサイズなどによって、改行するかどうかの判断をゆだねます。適度にwbrタグを使用しておくと、様々な実行環境に対応することができますね。
参考文献：
MDN web docks <wbr>
<wbr> – 単語の区切り
HTML5タグリファレンス
