[2] [[HTML]] の [DFN[[CODE(HTMLe)@en[[[wbr]]]] [[要素]]]]は、
[[改行]]が可能な[[位置]]を表します。
[SRC[>>12]]

[3]
:状態:非標準
:[[名前空間URI]]:[CODE(URI)@en[[[http://www.w3.org/1999/xhtml]]]]
:[[局所名]]:[CODE(HTMLe)@en[[[wbr]]]]
([Q@en[''w''ord ''br''eak]] より [SRC[>>12]])
:[[開始タグ]]:必須
:[[終了タグ]]:禁止
:文脈:
:[[内容モデル]]:[[空]]
:[[属性]]:


** レンダリング

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

* 歴史

[12] [CODE(HTMLe)@en[[[wbr]]]] [[要素]]は [[HTML 2.0]]
の拡張として [[Netscape Navigator]] が実装しました。

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

;; [CITE[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 [CODE(HTMLe)@en[[[nobr]]]] 以外でも使えると読めますね。


[15] 
[CITE[HTML Tag Reference]], [TIME[2024-08-16T12:27:19.000Z]], [TIME[2001-06-08T08:51:07.425Z]] <http://web.archive.org/web/20010608085010/http://developer.netscape.com/docs/manuals/htmlguid/tags15.htm#tags%3AWBR>

* 実装

[4] この要素型ははじめ [[Netscape]] が
[CODE(HTMLe)[[[nobr]]]] 要素型と共に実装し、
[[WinIE]] など他の実装でも採用されました。

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

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

[[#comment]]


** 関連

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

[[#comment]]


** 例

[8] [[URI]] の改行可能位置を指定する例
[PRE(HTML deprecated example code)[
<[CODE(HTMLe)[p]]>詳しくは
<[CODE(HTMLe)[nobr]]><[CODE(HTMLe)[code]]>http://<[CODE(HTMLe)[wbr]]>example.com/<[CODE(HTMLe)[wbr]]>very/very/very/<[CODE(HTMLe)[wbr]]>really/long/<[CODE(HTMLe)[wbr]]>uri<[CODE(HTMLe)[wbr]]>#reference</[CODE(HTMLe)[code]]></[CODE(HTMLe)[nobr]]>
を参照して下さい。</[CODE(HTMLe)[p]]>
]PRE]

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

>
[PRE(HTML example code)[
<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>
]PRE]

([[名無しさん]])

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

>
[PRE(HTML example code)[
<strong>埼玉県出身の芸能人を<wbr>教えてください。。。<wbr>。。。。。</strong>
]PRE]



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

>
[PRE(HTML example code)[
<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>
]PRE]

>
[PRE(HTML example code)[
<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>
]PRE]

>
[PRE(HTML example code)[
<a href="myalbumA02.php?DeliveryID=0xJcwDkGMx9I-Qswt-pBreGUNN79NdGKI_mG8jT6dpBW7-ZYcntNuYjJA7oTsjqwzUpTGF3CgEdc">戸塚<wbr>駅西<wbr>口再開発</a></td>
]PRE]

>
[PRE(HTML example code)[
<a href="myalbumA02.php?DeliveryID=0xJcwDkGMx9I-Qswt-pBreGUNN79NdGKI_mG8jT6dpBW7-ZYcntNuYjJA7oTsjqwzUpTGF3CgEdc">さて<wbr>どう<wbr>なっ<wbr>てい<wbr>くのかな?</a></td>
]PRE]

>
[PRE(HTML example code)[
<a href="myalbumA02.php?DeliveryID=0846Pnj8xrBA1IWQM7dijv9u8RtqCl3jm_mG8jT6dpBW7-ZYcntNuYjdayFerf09cwk0UgD6ZpOU">安室<wbr>奈美恵Ⅱ</a></td>
]PRE]

>
[PRE(HTML example code)[
<a href="http://urs.duogate.jp/profile/pf/profile/?DeliveryID=07mbkfd0zhluspp0q3PViQkyLkDQySLNQRY3MNt2S3GVGFUuCCgJFJQ">エバ<wbr>ーブルー</a></td>
]PRE]

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

([[名無しさん]])

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

>
[PRE(HTML example code)[
<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>
]PRE]

>
[PRE(HTML example code)[
<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>
]PRE]

>
[PRE(HTML example code)[
<a href="myalbumA02.php?DeliveryID=0xJcwDkGMx9I-Qswt-pBreGUNN79NdGKI_mG8jT6dpBW7-ZYcntNuYjJA7oTsjqwzUpTGF3CgEdc">戸塚<wbr>駅西<wbr>口再開発</a></td>
]PRE]

>
[PRE(HTML example code)[
<a href="myalbumA02.php?DeliveryID=0xJcwDkGMx9I-Qswt-pBreGUNN79NdGKI_mG8jT6dpBW7-ZYcntNuYjJA7oTsjqwzUpTGF3CgEdc">さて<wbr>どう<wbr>なっ<wbr>てい<wbr>くのかな?</a></td>
]PRE]

>
[PRE(HTML example code)[
<a href="myalbumA02.php?DeliveryID=0846Pnj8xrBA1IWQM7dijv9u8RtqCl3jm_mG8jT6dpBW7-ZYcntNuYjdayFerf09cwk0UgD6ZpOU">安室<wbr>奈美恵Ⅱ</a></td>
]PRE]

>
[PRE(HTML example code)[
<a href="http://urs.duogate.jp/profile/pf/profile/?DeliveryID=07mbkfd0zhluspp0q3PViQkyLkDQySLNQRY3MNt2S3GVGFUuCCgJFJQ">エバ<wbr>ーブルー</a></td>
]PRE]

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

([[名無しさん]])

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

>
[PRE(HTML example code)[
<SPAN class="style9">http:/<wbr />/<wbr />37875182.at.webry.info/<wbr />200708/<wbr />article_1.html</SPAN>
]PRE]

自動挿入の模様。ちなみにこの[[文書]]の先頭は:
[PRE(HTML bad example code)[
<!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">
]PRE]

([[名無しさん]])

[19]
[CITE[自転車 の検索結果 - Yahoo!商品検索]] ([CODE[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>

>
[PRE(HTML example code)[
<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>
]PRE]

([[名無しさん]])

[[#comment]]


** メモ

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

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

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

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

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


* 歴史

[23] [CITE@en[<wbr> is an empty element.]], [[Hixie]], [TIME[2006-08-01 06:42:12 +09:00]], [TIME[2024-09-01T09:37:11.000Z]] <https://github.com/whatwg/html/commit/78910a0464b60b2d2b3a1864970f66a8bdb774f3>




[24] [CITE@en[(X)HTML5 Tracking]]
([TIME[2010-01-11 13:54:04 +09:00]] 版)
<http://html5.org/tools/web-apps-tracker?from=4560&to=4561>

- [25] [CITE@en[HTML5 Revision Tracker]]
([TIME[2010-02-14 20:34:32 +09:00]] 版)
<http://html5.org/tools/web-apps-tracker?from=4730&to=4731>
-- [37] 
[CITE@en['''['''giow''']''' (2) Define <wbr> handling.]], [[Hixie]], [TIME[2010-02-14 19:47:17 +09:00]], [TIME[2024-09-06T11:27:31.000Z]] <https://github.com/whatwg/html/commit/b18db11c768c72e5d023c964a89a908a030a6456#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d>



[30] [CITE[IRC logs: freenode / #whatwg / 20100328]]
([TIME[2010-04-05 08:17:44 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20100328>

[31] [CITE[IRC logs: freenode / #whatwg / 20100329]]
([TIME[2010-04-07 00:29:02 +09:00]] 版)
<http://krijnhoetmer.nl/irc-logs/whatwg/20100329>


-[28] [CITE@en[HTML5 Revision Tracker]]
([TIME[2010-04-03 00:06:40 +09:00]] 版)
<http://html5.org/tools/web-apps-tracker?from=4955&to=4956>
--[38] [CITE@en['''['''ac''']''' (0) Make <wbr> valid.]], [[Hixie]], [TIME[2010-04-02 16:16:25 +09:00]], [TIME[2024-09-06T11:31:36.000Z]] <https://github.com/whatwg/html/commit/33fc385dc0248f1464af8d8286da1cb55d52eb9c#diff-41cf6794ba4200b839c53531555f0f3998df4cbb01a4d5cb0b94e3ca5e23947d>
--
[29] [CITE[Bug 9350 – Make <wbr> element conforming]]
([TIME[2010-04-03 00:08:29 +09:00]] 版)
<http://www.w3.org/Bugs/Public/show_bug.cgi?id=9350>




[FIG(data)[ [39] [[HTML要素概説]]

:[F[要素名]]:[CODE[wbr]]
:日付:[TIME[2010-04-02]]
:説明:
[TIME[2010-04-02]]、
[CITE[HTML Standard]]
に
[CODE[wbr]]
が追加された。
処理の規定はこれ以前から存在したが、
初めて[[著者]]の利用が[[適合]]することになった。
:出典:
[REFS[

-
[CITE[HTML r4956]],
[DATA(.author)[[[Hixie]]]], 
[TIME(.published)[2010-04-02 16:16:25 +09:00]], [TIME[2024-09-06T11:31:36.000Z]] <https://github.com/whatwg/html/commit/33fc385dc0248f1464af8d8286da1cb55d52eb9c>

]REFS]
:参照:[CODE[wbr]]

]FIG]



[32] [CITE['''['''whatwg''']''' Interaction of <wbr> and CSS white-space]]
([TIME[2011-12-15 13:06:43 +09:00]] 版)
<http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2011-December/034190.html>

[33] [CITE[''''''[''''''whatwg'''''']'''''' Interaction of <wbr> and CSS white-space]]
( ([TIME[2012-01-14 12:22:32 +09:00]] 版))
<http://lists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2012-January/034379.html>

[34] [CITE@en[Web Applications 1.0 r6898     Make <wbr> less magical.]]
( ([TIME[2012-01-14 08:45:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=6897&to=6898>

[35] [CITE@en[Web Applications 1.0 r7538 Clarify the requirements for <wbr>.]]
( ([TIME[2012-11-25 13:09:00 +09:00]] 版))
<http://html5.org/tools/web-apps-tracker?from=7537&to=7538>

[36] [CITE@en[Web Applications 1.0 r8798 Get HTML ahead of CSS for the definition of 'wbr'.]]
( ([TIME[2014-09-20 06:41:00 +09:00]] 版))
<https://html5.org/r/8798>

[20] [CITE@en[Re: ''''''[''''''css-display'''''']'''''' Explaining <br>]]
([[Tab Atkins Jr.]] 著, [TIME[2016-03-25 03:32:55 +09:00]] 版)
<https://lists.w3.org/Archives/Public/www-style/2016Mar/0367.html>

[21] [CITE@en[Re: '''['''css-display''']''' Explaining <br>]]
([[fantasai]]著, [TIME[2017-02-15 08:51:32 +09:00]])
<https://lists.w3.org/Archives/Public/www-style/2017Feb/0065.html>