<wbr> - 単語の区切り

トップ > HTMLリファレンス > <wbr>

概要

項目説明
形式<wbr>
サポートH5 / e2 / Ch1 / Sa4 / Op11.7 / N2
カテゴリフローコンテンツ, フレージングコンテンツ
親要素フレージングコンテンツ を子要素に持てるもの
子要素無し(Empty)
タグの省略開始タグ:必須 / 終了タグ:無し

説明

wbr は Word BReak の略です。行の中で「改行してもよい箇所」を示します。

wbr は最初 Netscape Navigator でサポートされました。<nobr> とあわせて使用され、<nobr> によって改行が禁止されたテキストでも <wbr> が挿入された箇所だけは改行が許可されます。

wbr はその後、IE など他のブラウザに採用されました。HTML4.01 には採用されませんでしたが、HTML5 でサポートされる予定です。ただし、HTML5 でも <nobr> は採用されない予定です。

wbrの使用例 - 長い英単語を改行する

下記の様に長い英単語を適度に改行する場合に用います。

塵肺症のことを英語で、
Pneumono<wbr>ultra<wbr>micro<wbr>scopic<wbr>silico<wbr>volcano<wbr>coni<wbr>osis
といいます。

横幅の狭いブラウザでは、下記の例の様に表示されます。

塵肺症のことを英語で、Pneumonoultramicroscopicsilico
volcanoconiosis といいます。

パス名やURLを改行する

例えば、パス名やURLの途中で改行されないことにより、文章の右側に空白が空いてしまう場合、

HTML5に関する概要は
http://ja.wikipedia.org/wiki/HTML5 を参照して
ください。

wiki の前に <wbr> を挿入することで、下記の様に表示することが可能となります。

HTML5に関する概要は http://ja.wikipedia.org/
wiki/HTML5 を参照してください。

改行制御に関連するスタイルシート

改行制御に関わるスタイルシートには white-spaceline-breakword-break などがあります。

ソフトハイフンによる改行制御

<wbr> と似たものにソフトハイフンという特殊文字があります。ソフトハイフンを挿入した箇所では長い単語の途中であっても改行が許され、改行された場合はハイフン(またはハイフンに似た記号)が表示されます。

ソフトハイフンは、Unicode では U+00AD、HTML4.01 では、文字参照の &shy; や &#173; に割り当てられています。HTML5 には &shy; や &#173; の記載はありませんが、Unicode(U+00AD)は使用可能です。

使用例は次のようになります。

塵肺症のことを英語で、
Pneumono&shy;ultra&shy;micro&shy;scopic&shy;silico&shy;volcano&shy;coni&shy;osis
といいます。

ソフトハイフンをサポートするブラウザでは、例えば次のように表示されます。

塵肺症のことを英語で、Pneumonoultramicroscopicsilico-
volcanoconiosis といいます。

属性

【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

HTML
<nobr>
あいうえお<wbr>かきくけこ<wbr>さしすせそ<wbr>たちつてと
</nobr>
<br>
<nobr>
http://www.tohoho-web.com/<wbr>html/wbr.htm
</nobr>
表示
あいうえおかきくけこさしすせそ
たちつてと
http://www.tohoho-web.com/
html/wbr.htm

関連項目

<nobr><br>

Copyright (C) 1996-2015 杜甫々
初版:1996年9月10日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/wbr.htm