[2] HTML の wbr 要素は、 改行が可能な位置を表します。 >>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 要素とは異なり、 改行が必要な時だけしか改行しないことも説明されていました。

Netscape Navigator Extensions to HTML http://web.archive.org/web/20000415023954/http://www.netscape.com/home/services_docs/html-extensions.html

[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 以外でも使えると読めますね。

[15] HTML Tag Reference, , http://web.archive.org/web/20010608085010/http://developer.netscape.com/docs/manuals/htmlguid/tags15.htm#tags%3AWBR

実装

[4] この要素型ははじめ Netscape が nobr 要素型と共に実装し、 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] nobr は CSS の white-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

歴史

[23] <wbr> is an empty element., Hixie, , https://github.com/whatwg/html/commit/78910a0464b60b2d2b3a1864970f66a8bdb774f3

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

[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

[39] HTML要素概説
要素名
wbr
日付
説明
、 HTML Standard に wbr が追加された。 処理の規定はこれ以前から存在したが、 初めて著者の利用が適合することになった。
出典
  • HTML r4956, , , https://github.com/whatwg/html/commit/33fc385dc0248f1464af8d8286da1cb55d52eb9c
参照
wbr

[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