<nobr>タグの解説
<nobr>は、ブラウザが自動的に改行を行うことを無効にします。幅が決められた親要素の中にあっても、<nobr>から</nobr>で囲まれた部分は画面の端に到達しても折り返しません。
主に長い英単語が途中で切れてしまうのを防ぐ為に使われます。折り返しが発生する際に改行しても良い位置を指定するには、<wbr>を使用します。
<nobr>要素に指定できる属性
- グローバル属性
- 全てのHTML要素に指定できる共通の属性です。詳細は一覧表で解説します。
- イベントハンドラ
- 全てのHTML要素に指定できるコンテンツ属性です。
<nobr>要素の使い方とサンプルコード
この要素の最も基本的な書き方は以下の通りです。長い単語などを折り返したくない場合に範囲を指定します。
<p>
text <nobr>long-text</nobr> text.
</p>
親要素の幅が制限されていても、<nobr>で囲った文字は改行が発生しません。
<div style="width:200px; background:#ddd;">
<nobr>
対応しているブラウザでは要素に指定された幅をはみ出しても改行しません。
</nobr>
</div>
<wbr>と組み合わせて折り返しの改行位置を調整する
<wbr>を使用すると、任意の箇所で折り返しの改行位置を調整することができます。日本語は、英語と違って文章が単語で区切られないため、折り返しを制御するにはCSSの調整が必要になります。詳細は<wbr>の解説を参照して下さい。
<div style="width:200px; background:#ddd;">
<nobr>
対応しているブラウザでは<wbr>要素に指定された幅をはみ出しても改行しません。
</nobr>
</div>