* [CODE(HTMLe)@en[wbr]] 要素 (HTML) [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[(必ず折返されるわけではありません。)]] [20] cHgDHV jbxqvrojwqsp, [url=http://qsmxhcavhzfy.com/]qsmxhcavhzfy[/url], [link=http://qwdyxkrpnayw.com/]qwdyxkrpnayw[/link], http://gbsxmbtiwbgh.com/ ([[ylxmuiehosg]] [llhysh@epcgao.com] [WEAK[2007-09-15 01:32:40 +00:00]]) [21] cHgDHV jbxqvrojwqsp, [url=http://qsmxhcavhzfy.com/]qsmxhcavhzfy[/url], [link=http://qwdyxkrpnayw.com/]qwdyxkrpnayw[/link], http://gbsxmbtiwbgh.com/ ([[ylxmuiehosg]] [llhysh@epcgao.com] [WEAK[2007-09-15 01:33:11 +00:00]]) [[#comment]] ** 歴史 [12] [CODE(HTMLe)@en[[[wbr]]]] [[要素]]は [[HTML 2.0]] の拡張として [[Netscape Navigator]] が実装しました。 [CODE(HTMLe)@en[[[nobr]]]] 内で[[改行]]したい場所を指定したい稀な場合に使えること、任意の場所で[[改行]]可能な場所を[[利用者エージェント]]に伝えるために使えることが説明されていました。 [CODE(HTMLe)@en[[[br]]]] [[要素]]とは異なり、 [[改行]]が必要な時だけしか[[改行]]しないことも説明されていました。 ;; [CITE[Netscape Navigator Extensions to HTML]] [[#comment]] ** 実装 [4] この要素型ははじめ [[Netscape]] が [CODE(HTMLe)[[[nobr]]]] 要素型と共に実装し、 [[WinIE]] など他の実装でも採用されました。 [1] [[WinIE]] 3.0 では [CODE(HTMLe)[[[nobr]]]] 要素内の最後の [CODE(HTMLe)[wbr]] 要素が機能しない不具合があったそうです。出典: [CITE[ブラウザーによって振る舞いの異なるタグ : 他にもありますか?]] [[#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 を参照して下さい。 ]PRE] [13] [CITE@ja[CM事情?|天然だけど夢はある。]] ([CODE[2007-07-05 20:47:03 +09:00]] 版) > [PRE(HTML example code)[ http://www.intel.co.jp/jp/personal/campaign/promotion/blog/index.htm ]PRE] ([[名無しさん]]) [14] [CITE[埼玉県出身の芸能人を教えてください。。。。。。。。 - Yahoo!知恵袋]] ([CODE[2007-07-22 17:49:52 +09:00]] 版) > [PRE(HTML example code)[ 埼玉県出身の芸能人を教えてください。。。。。。。。 ]PRE] ([[名無しさん]]) [15] [CITE[埼玉県出身の芸能人を教えてください。。。。。。。。 - Yahoo!知恵袋]] ([CODE[2007-07-22 17:49:52 +09:00]] 版) > [PRE(HTML example code)[ 埼玉県出身の芸能人を教えてください。。。。。。。。 ]PRE] ([[名無しさん]]) [16] [CITE[Myフォトアルバム]] ([[??????]] 著, [CODE[2007-07-22 17:52:15 +09:00]] 版) > [PRE(HTML example code)[

夏草が大変です
上の方を見ても
下を見ても

草や葉っぱの

緑色

野山が
生き生き

木片に
彫りました

]PRE] > [PRE(HTML example code)[ はぁ?…マジむかつくから(`ヘ´)。GaLって呼ばないでよぉ♂♀‥‥② ]PRE] > [PRE(HTML example code)[ 戸塚駅西口再開発 ]PRE] > [PRE(HTML example code)[ さてどうなっていくのかな? ]PRE] > [PRE(HTML example code)[ 安室奈美恵Ⅱ ]PRE] > [PRE(HTML example code)[ エバーブルー ]PRE] 文字数かなにかで適当に挿入している? ([[名無しさん]]) [17] [CITE[Myフォトアルバム]] ([[??????]] 著, [CODE[2007-07-22 17:52:15 +09:00]] 版) > [PRE(HTML example code)[

夏草が大変です
上の方を見ても
下を見ても

草や葉っぱの

緑色

野山が
生き生き

木片に
彫りました

]PRE] > [PRE(HTML example code)[ はぁ?…マジむかつくから(`ヘ´)。GaLって呼ばないでよぉ♂♀‥‥② ]PRE] > [PRE(HTML example code)[ 戸塚駅西口再開発 ]PRE] > [PRE(HTML example code)[ さてどうなっていくのかな? ]PRE] > [PRE(HTML example code)[ 安室奈美恵Ⅱ ]PRE] > [PRE(HTML example code)[ エバーブルー ]PRE] 文字数かなにかで適当に挿入している? ([[名無しさん]]) [18] [CITE[FC2スパム対策]] ([CODE[2007-08-02 21:29:00 +09:00]] 版) > [PRE(HTML example code)[ http://37875182.at.webry.info/200708/article_1.html ]PRE] 自動挿入の模様。ちなみにこの[[文書]]の先頭は: [PRE(HTML bad example code)[ ]PRE] ([[名無しさん]]) [19] [CITE[自転車の検索結果 - Yahoo!商品検索]] ([CODE[2007-09-02 18:20:45 +09:00]] 版) > [PRE(HTML example code)[

店舗情報:Amazon.co.jp

]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]] では[[内容]]を持ちます。 ([[名無しさん]]) [10] [CITE[airheadの日記]] [CSECTION[bookmarklet: Wrap! ― 長い1byte文字列を折り返す(Mozilla)]] ([[名無しさん]] [sage]) [11] ちなみに、 [[Gecko]] は隣接する [CODE(DOMi)@en[[[Text]]]] [[節点]]同士の境界も折返し候補とするようです。 (仕様か偶然かは不明) ([[名無しさん]] [sage]) [22] [CITE@en[Re: DogFood ()]] ([[j.j.]] 著, [TIME[2007-12-06 20:09:25 +09:00]] 版) ([[名無しさん]]) [[#comment]] * メモ