wbr

wbr 要素 (HTML)

[2] HTMLwbr 要素は、 改行が可能な位置を表します。 >>12

[3]

状態
非標準
名前空間URI
http://www.w3.org/1999/xhtml
局所名
wbr (word break より >>12)
開始タグ
必須
終了タグ
禁止
文脈
内容モデル
属性

レンダリング

[5] nobr 要素内は通常空白等で行われる自動的な折返しが行われませんが、 それでは表示可能な領域に収まりきらない場合、 wbr 要素があればその位置が折返しの候補となります。 (必ず折返されるわけではありません。)

歴史

[12] wbr 要素HTML 2.0 の拡張として Netscape Navigator が実装しました。

nobr 内で改行したい場所を指定したい稀な場合に使えること、 任意の場所で改行可能な場所を利用者エージェントに伝えるために使えることが説明されていました。 br 要素とは異なり、 改行が必要な時だけしか改行しないことも説明されていました。

[26]

The WBR element stands for Word BReak. This is for the very rare case when you have a NOBR section and you know exactly where you want it to break. Also, any time you want to give the Netscape Navigator help by telling it where a word is allowed to be broken. The WBR element does not force a line break (BR does that) it simply lets the Netscape Navigator know where a line break is allowed to be inserted if needed.

[27] >>26 nobr 以外でも使えると読めますね。

実装

[4] この要素型ははじめ Netscapenobr 要素型と共に実装し、 WinIE など他の実装でも採用されました。

[1] WinIE 3.0 では nobr 要素内の最後の wbr 要素が機能しない不具合があったそうです。

出典: ブラウザーによって振る舞いの異なるタグ : 他にもありますか? http://tohoho.wakusei.ne.jp/lng/199801/98012000.htm

関連

[6] SOFT HYPHEN: 似たような働きをする文字SOFT HYPHEN (SHY) があります。 SHYハイフン付けに使われる文字で、 折返しの候補となりますが、折返される時は HYPHEN のように表示され、 折返されない時やレンダリング以外の時は存在しないように扱われます。 wbr 要素との違いは、 HYPHEN のようなものが表示されることと、 nobr 要素内に限らず使用できることです。

[8] URI の改行可能位置を指定する例

<p>詳しくは
<nobr><code>http://<wbr>example.com/<wbr>very/very/very/<wbr>really/long/<wbr>uri<wbr>#reference</code></nobr>
を参照して下さい。</p>

[13] CM事情?|天然だけど夢はある。 (2007-07-05 20:47:03 +09:00 版) http://ameblo.jp/nonoko50/entry-10038595332.html

<a href="http://www.intel.co.jp/jp/personal/campaign/promotion/blog/index.htm" target="_blank"><font size="2">http://<wbr />www.in<wbr />tel.co<wbr />.jp/jp<wbr />/perso<wbr />nal/ca<wbr />mpaign<wbr />/promo<wbr />tion/b<wbr />log/in<wbr />dex.ht<wbr />m</font></a>

(名無しさん)

[14] 埼玉県出身の芸能人を教えてください。。。。。。。。 - Yahoo!知恵袋 (2007-07-22 17:49:52 +09:00 版) http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q103271065

<strong>埼玉県出身の芸能人を<wbr>教えてください。。。<wbr>。。。。。</strong>

[16] Myフォトアルバム (?????? 著, 2007-07-22 17:52:15 +09:00 版) http://aumypage.duogate.jp/myalbum/myalbumA01.php

<img border="0" src="/images/emoji/e/gif16/0xF666.gif" height='18'/><wbr> <br><br><wbr>夏草<wbr>が 大<wbr>変で<wbr>す <br><wbr>上の<wbr>方を<wbr>見て<wbr>も <br><wbr>下を<wbr>見て<wbr>も <br><wbr><br>草<wbr>や 葉<wbr>っぱ<wbr>の <br><wbr><br>緑<wbr>色 <br><wbr><br><br><wbr>野山<wbr>が <br><wbr>     <wbr>生き<wbr>生き <wbr><br><br><wbr><br>木<wbr>片に <wbr><br>   <wbr>  彫<wbr>りま<wbr>した <br><br></a></td>
<a href="myalbumA02.php?DeliveryID=0xJcwDkGMx9L73SkLhXjKuvZUCe9wYqq4_mG8jT6dpBW7-ZYcntNuYvV6q8T-L1Lz5UD7c6DgUlQ">はぁ<wbr>?…<wbr>マジ<wbr>むか<wbr>つく<wbr>から(<wbr>`ヘ´<wbr>)。G<wbr>aL<wbr>って<wbr>呼ば<wbr>ない<wbr>でよ<wbr>ぉ♂<wbr>♀‥‥②</a></td>
<a href="myalbumA02.php?DeliveryID=0xJcwDkGMx9I-Qswt-pBreGUNN79NdGKI_mG8jT6dpBW7-ZYcntNuYjJA7oTsjqwzUpTGF3CgEdc">戸塚<wbr>駅西<wbr>口再開発</a></td>
<a href="myalbumA02.php?DeliveryID=0xJcwDkGMx9I-Qswt-pBreGUNN79NdGKI_mG8jT6dpBW7-ZYcntNuYjJA7oTsjqwzUpTGF3CgEdc">さて<wbr>どう<wbr>なっ<wbr>てい<wbr>くのかな?</a></td>
<a href="myalbumA02.php?DeliveryID=0846Pnj8xrBA1IWQM7dijv9u8RtqCl3jm_mG8jT6dpBW7-ZYcntNuYjdayFerf09cwk0UgD6ZpOU">安室<wbr>奈美恵Ⅱ</a></td>
<a href="http://urs.duogate.jp/profile/pf/profile/?DeliveryID=07mbkfd0zhluspp0q3PViQkyLkDQySLNQRY3MNt2S3GVGFUuCCgJFJQ">エバ<wbr>ーブルー</a></td>

文字数かなにかで適当に挿入している?

(名無しさん)

[17] Myフォトアルバム (?????? 著, 2007-07-22 17:52:15 +09:00 版) http://aumypage.duogate.jp/myalbum/myalbumA01.php

<img border="0" src="/images/emoji/e/gif16/0xF666.gif" height='18'/><wbr> <br><br><wbr>夏草<wbr>が 大<wbr>変で<wbr>す <br><wbr>上の<wbr>方を<wbr>見て<wbr>も <br><wbr>下を<wbr>見て<wbr>も <br><wbr><br>草<wbr>や 葉<wbr>っぱ<wbr>の <br><wbr><br>緑<wbr>色 <br><wbr><br><br><wbr>野山<wbr>が <br><wbr>     <wbr>生き<wbr>生き <wbr><br><br><wbr><br>木<wbr>片に <wbr><br>   <wbr>  彫<wbr>りま<wbr>した <br><br></a></td>
<a href="myalbumA02.php?DeliveryID=0xJcwDkGMx9L73SkLhXjKuvZUCe9wYqq4_mG8jT6dpBW7-ZYcntNuYvV6q8T-L1Lz5UD7c6DgUlQ">はぁ<wbr>?…<wbr>マジ<wbr>むか<wbr>つく<wbr>から(<wbr>`ヘ´<wbr>)。G<wbr>aL<wbr>って<wbr>呼ば<wbr>ない<wbr>でよ<wbr>ぉ♂<wbr>♀‥‥②</a></td>
<a href="myalbumA02.php?DeliveryID=0xJcwDkGMx9I-Qswt-pBreGUNN79NdGKI_mG8jT6dpBW7-ZYcntNuYjJA7oTsjqwzUpTGF3CgEdc">戸塚<wbr>駅西<wbr>口再開発</a></td>
<a href="myalbumA02.php?DeliveryID=0xJcwDkGMx9I-Qswt-pBreGUNN79NdGKI_mG8jT6dpBW7-ZYcntNuYjJA7oTsjqwzUpTGF3CgEdc">さて<wbr>どう<wbr>なっ<wbr>てい<wbr>くのかな?</a></td>
<a href="myalbumA02.php?DeliveryID=0846Pnj8xrBA1IWQM7dijv9u8RtqCl3jm_mG8jT6dpBW7-ZYcntNuYjdayFerf09cwk0UgD6ZpOU">安室<wbr>奈美恵Ⅱ</a></td>
<a href="http://urs.duogate.jp/profile/pf/profile/?DeliveryID=07mbkfd0zhluspp0q3PViQkyLkDQySLNQRY3MNt2S3GVGFUuCCgJFJQ">エバ<wbr>ーブルー</a></td>

文字数かなにかで適当に挿入している?

(名無しさん)

[18] FC2スパム対策 (2007-08-02 21:29:00 +09:00 版) http://seo.fc2.com/spam/?ssid=&cc=&pg=8

<SPAN class="style9">http:/<wbr />/<wbr />37875182.at.webry.info/<wbr />200708/<wbr />article_1.html</SPAN>

自動挿入の模様。ちなみにこの文書の先頭は:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0021)http://tomon.us/spam/ -->
<HTML xmlns="http://www.w3.org/1999/xhtml">

(名無しさん)

[19] 自転車 の検索結果 - Yahoo!商品検索 (2007-09-02 18:20:45 +09:00 版) http://psearch.yahoo.co.jp/search?ei=UTF-8&p=%E8%87%AA%E8%BB%A2%E8%BB%8A&fr=psrch-rank&first=1

<div class="shop"><span class="shop-info">店舗情報:</span><wbr><a href="http://psrd.yahoo.co.jp/PAGE=P/LOC=PRD/R=1/O=M/MID=xfeed-340338/PID=B000AQXKGK/TBID=06753fcfaa93/SIG=121egc7uj/EXP=1188811307/*-http%3A//detail.psearch.yahoo.co.jp/m/3-340338/" class="link-function">Amazon.co.jp</a></div>

(名無しさん)

メモ

[7] nobrCSSwhite-space: nowrap で代替できますが、 wbr の代替は今のところありません。 境界における page-break-after のようなものに相当する wbr の代替が将来導入されることが期待されます。また、 ハイフン付けに関する制御も行えるようになることが期待されます。 但しそれとは別に文書木中の折返しを表すマーク付けの構造はやはり必要です。 (それが HTML の一部であるかどうかは別として。あるいは HTML なら span空要素を挿入するという手もありかもしれません。)

[9] Safari では内容を持ちます。 http://developer.apple.com/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/HTMLExtensions.html#//apple_ref/doc/uid/TP40002066 (名無しさん)

[10] airheadの日記 bookmarklet: Wrap! — 長い1byte文字列を折り返す(Mozilla) http://slashdot.jp/~airhead/journal/270308 (名無しさん [sage])

[11] ちなみに、 Gecko は隣接する Text 節点同士の境界も折返し候補とするようです。 (仕様か偶然かは不明) (名無しさん [sage])

[22] Re: DogFood (<wbr>) (j.j. 著, 2007-12-06 20:09:25 +09:00 版) http://lists.w3.org/Archives/Public/public-html/2007Dec/0080.html (名無しさん)

メモ

[24] (X)HTML5 Tracking ( 版) http://html5.org/tools/web-apps-tracker?from=4560&to=4561

[25] HTML5 Revision Tracker ( 版) http://html5.org/tools/web-apps-tracker?from=4730&to=4731

[28] HTML5 Revision Tracker ( 版) http://html5.org/tools/web-apps-tracker?from=4955&to=4956

[29] Bug 9350 – Make <wbr> element conforming ( 版) http://www.w3.org/Bugs/Public/show_bug.cgi?id=9350

[30] IRC logs: freenode / #whatwg / 20100328 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100328

[31] IRC logs: freenode / #whatwg / 20100329 ( 版) http://krijnhoetmer.nl/irc-logs/whatwg/20100329

[32] [whatwg] Interaction of <wbr> and CSS white-space ( 版) http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-December/034190.html

[33] [whatwg] Interaction of <wbr> and CSS white-space ( ( 版)) http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-January/034379.html

[34] Web Applications 1.0 r6898 Make <wbr> less magical. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=6897&to=6898

[35] Web Applications 1.0 r7538 Clarify the requirements for <wbr>. ( ( 版)) http://html5.org/tools/web-apps-tracker?from=7537&to=7538

[36] Web Applications 1.0 r8798 Get HTML ahead of CSS for the definition of 'wbr'. ( ( 版)) https://html5.org/r/8798

[20] Re: [css-display] Explaining <br> (Tab Atkins Jr. 著, 版) https://lists.w3.org/Archives/Public/www-style/2016Mar/0367.html

[21] Re: [css-display] Explaining <br> (fantasai著, ) https://lists.w3.org/Archives/Public/www-style/2017Feb/0065.html