[33-1] 改行可能位置を示す wbr要素 を使ってみよう

最終更新日:2017年11月05日  (初回投稿日:2012年01月26日)

<wbr>要素は、ブラウザに改行可能位置を示します。

使用する要素 <wbr>

「wbr」は「word break」の略。
以前紹介した <br>(改行させる要素)は「line break 」の略です。
<wbr>は<br>と同様に「終了タグ」(</wbr>)を省略できます。

<wbr>は、<br>と違って、強制的に改行させるのでなく「改行すべきだったら改行していいよ」とブラウザに指示し、ブラウザは、表示領域の幅に合わせて改行かそのままか自動的に判断します。

<wbr>は、もともと Netscape Navigator独自の要素で、<nobr>〜</nobr>(改行禁止の指定)の中で、改行してもいい箇所に使用したそうです。
HTML4では標準仕様に取り入れなかったけど、HTML5から標準仕様になったんだそうです。

<wbr>を使ってみよう

<wbr>は、長い単語などを表記するときに、改行してもいい所をブラウザに指示します。

サンプルを見てみましょう。

(サンプルの英単語は「17の材料からなる料理の名前」だそうで、182文字もあります。
 古代ギリシャの劇作家アリストファネスの作品中に出てくる単語(の英訳)だそうです。)

wbrを指定した場合
Aopadotenachoselachogaleokranioleipsanodrimhipotrimmatosilphioparaome litokatakechymenokichlepikossyphophattoperisteralektryonoptekephallio kigklopeleiolagoiosiraiobaphetraganopterygon
wbrを指定しなかった場合
Aopadotenachoselachogaleokranioleipsanodrimhipotrimmatosilphioparaomelitokatakechymenokichlepikossyphophattoperisteralektryonoptekephalliokigklopeleiolagoiosiraiobaphetraganopterygon

<wbr>を指定しない2番目の <dd>要素の中は、枠を突き抜けています。

上のサンプルのHTMLです。

<dl>
<dt>wbrを指定した場合</dt>
<dd>Aopadotenachoselachogaleokranioleip<wbr>sanodrimhipotrimmatosilphioparaome<wbr>
litokatakechymenokichlepikossypho<wbr>phattoperisteralektryonoptekephallio<wbr>
kigklopeleiolagoiosiraiobaphetragano<wbr>pterygon</dd>
<dt>wbrを指定しなかった場合</dt>
<dd>Aopadotenachoselachogaleokranioleipsanodrimhipotrimmatosilphioparaom
elitokatakechymenokichlepikossyphophattoperisteralektryono
ptekephalliokigklopeleiolagoiosiraiobaphetraganopterygon
</dd>
</dl>

最初の <dd>要素の中で、<wbr>要素を適宜使っています(3〜5行目)
必ず <wbr>要素の部分で改行しているのではなく、領域内に収まる部分はそのままで、収まらないところでは <wbr>要素の箇所で改行していますね。

日本語の場合は、ブラウザは基本的に 単語の途中でも1文字単位で切ります。なのでこの <wbr>要素は、あまり使う機会がないかもしれません。

英語などの場合は、ブラウザは単語の途中で改行しないようになっています。
単語と単語の間の「半角スペース」や、「-(ハイフン)」「/(スラッシュ)」などの記号の箇所が、ブラウザにとってデフォルトの「改行可能位置」です。
長い単語など、通常なら改行されないものに対して<wbr>要素を使います。

次のサンプルは、とても長いプログラムコードに、<wbr>要素を使って改行可能な位置を指定しています。

<pre>...
Heading heading = Helm.HeadingFactory(HeadingCoordinates[1], <wbr>HeadingCoordinates[2], <wbr>HeadingCoordinates[3], <wbr>HeadingCoordinates[4]);
Course course = Helm.CourseFactory(Heading, <wbr>Maps.MapFactoryFromHeading(heading), <wbr>Speeds.GetMaximumSpeed().ConvertToWarp());
...</pre>

参考:The wbr element - HTML 5.1 2nd Edition | W3C Recommendation

次回予告

次回は、改行がらみ(?)で、関連のCSSを紹介します。
単語の途中でも強制的に改行する「word-wrap: break-word」です。

今日の<wbr>要素は、ブラウザに「単語を勝手に壊させず、改行していい所を指定」しましたね。
このCSSは、領域の幅に合わせて単語の途中でも改行させる指定です。
URLなど、どこで切っても良いモノに使うと便利です。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

「レンタルサーバーはどこがいい?」とご質問をよくいただきますが、自分でも使っていてオススメなのは スターサーバー (ミニバードがスターサーバになりました)。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップ!もわかりやすい管理画面で、初めてでもすんなり使えます。
両方とも、なんといっても料金が安いです。

ちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、エックスサーバー 。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

スポンサーリンク

コメントの投稿

ご注意:メールアドレスは書かないで
「コメントを送信する」ボタンを押した後の「確認画面」で、メールアドレス・URL などを入力できるようになっており、メールアドレス・URL は、そのままオートリンクになる仕様です。
当方でメールアドレスだけ削除することも、メールアドレスを非公開にすることもできません
メールアドレスは書かないでください。詳しくはこちらにまとめましたのでご覧ください。

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
06 | 2018/07 | 08
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.