HTML

<br> <wbr> 改行

詳細を開く 詳細を閉じる
<br> ブラウザの幅に関わらず 文または単語の 改行を実行
white-space: nowrap; 改行を禁止
<wbr> ブラウザの幅に応じて 長い単語を 自動的に改行

元のHTMLコード

  • 改行を意識しない場合、<p>要素(段落)は以下のようになります。
    • ブラウザの幅が十分に広い場合には、改行されないで1行で表示されます。(「別ウィンドウで表示」をクリックすると、大きく表示できます)
    • ブラウザの幅が狭い場合には、以下のように表示されます。
      1. 英語は、(ブラウザの幅に応じて)適当なスペースで改行されています。長い単語の場合でも、ハイフンなどの記号が単語中に含まれる場合、そこで改行されます。
      2. 日本語は、(ブラウザの幅に応じて)適当な文字で改行されています。
      3. 長い数字と単語は、改行されません。1. 2. と同様に(ブラウザの幅に応じて)改行するには、<wbr>を追加します。
  • 文章の引用元:Walt Disney司馬遼太郎 著/竜馬がゆく(六)/秘密同盟

別ウィンドウで表示

<h3>英語</h3>
<p>
	All our dreams can come true, 
	if we have the courage to pursue them. 
	Walt Disney
</p>

<p>
	Bababadal-gharagh-takammin-arronn-konn-bronn-tonn-erronn-tuonn-thunn-trovarrhoun-awnskawn-toohoo-hoordenen-thurnuk
</p>

<h3>日本語</h3>
<p>
		桂の感情は果然硬化し、<!--
	 -->席をはらって帰国しようとした。<!--
     -->薩摩側も、なお藩の体面と<!--
	 -->威厳のために黙している。
</p>

<h3>長い数字と単語</h3>
<p>
    3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679
</p><p>
	Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft
</p>

改行を実行 : <br>

<br>要素は、

  • 文中で改行するために使われます。
  • ブラウザの幅に関わらず、<br>のところで必ず改行されます。
  • 終了タグはありません。
  • インライン要素です。

別ウィンドウで表示

<h3>英語</h3>
<p>
	All our dreams can come true,<br>
	if we have the courage to pursue them.<br>
	Walt Disney
</p>

<p>
	Bababadal-gharagh-takammin-<br>arronn-konn-bronn-<br>tonn-erronn-tuonn-<br>thunn-trovarrhoun-awnskawn-<br>toohoo-hoordenen-thurnuk
</p>

<h3>日本語</h3>
<p>
		桂の感情は果然硬化し、<br><!--
	 -->席をはらって帰国しようとした。<br><!--
     -->薩摩側も、なお藩の体面と<br><!--
	 -->威厳のために黙している。
</p>

<h3>長い数字と単語</h3>
<p>
	3.1415926535<br>8979323846<br>2643383279<br>5028841971<br>6939937510<br>5820974944<br>5923078164<br>0628620899<br>8628034825<br>3421170679
</p><p>
	Donaudampfschiffahrtselektrizitäten<br>hauptbetriebswerk<br>bauunterbeamten<br>gesellschaft
</p>

改行を禁止 : white-space: nowrap;

  • CSSで「white-space: nowrap;」を指定すると改行禁止となります。
  • ブラウザの幅が広くなっても、自動では改行されません。
  • なお、以下の「長い数字や単語」は元々改行されないので、特に効果はありません。
  • なお、改行禁止ため<nobr>要素が使われてきましたが、HTML5で非標準となっているので、使うべきではありません。

別ウィンドウで表示

<style>
    .nobr {
        white-space: nowrap;
    }
</style>

<h3>英語</h3>
<p class="nobr">
	All our dreams can come true, 
	if we have the courage to pursue them. 
	Walt Disney
</p>

<p class="nobr">
	Bababadal-gharagh-takammin-arronn-konn-bronn-tonn-erronn-tuonn-thunn-trovarrhoun-awnskawn-toohoo-hoordenen-thurnuk
</p>

<h3>日本語</h3>
<p class="nobr">
		桂の感情は果然硬化し、<!--
	 -->席をはらって帰国しようとした。<!--
     -->薩摩側も、なお藩の体面と<!--
	 -->威厳のために黙している。
</p>

<h3>長い数字と単語</h3>
<p class="nobr">
    3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679
</p><p class="nobr">
	Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft
</p>

長い単語を自動改行 : <wbr>

<wbr>要素は、

  • 長い単語中で改行可能な場所を指定するために使われます。
  • 以下のような文章(サンプルの「英語」と「日本語」の部分)では、元々ブラウザの幅に応じて、自動で改行されるので、効果はありません。
    1. 短い単語で構成されている普通の英語などの文章
    2. 長い単語であっても単語中にハイフンなどが含まれている場合
    3. 日本語の文章
  • サンプルの「長い数字と単語」の場合、ブラウザの幅に応じて改行されず、また<br>を追加するとブラウザの幅に関係なく改行されます。
  • そこで、<wbr>要素を単語中に入れると、改行が必要な場所のみ改行されるようにできます。
  • なお、長いURLやメールアドレスの場合は「/」「.」「-」「@」など記号の後で自動的に改行されるので、URLやメールアドレスで<wbr>要素を考慮する必要はありません。
  • 終了タグはありません。
  • インライン要素です。

別ウィンドウで表示

<h3>英語</h3>
<p>
	All our dreams can come true,<wbr>
	if we have the courage to pursue them.<wbr>
	Walt Disney
</p>

<p>
	Bababadal-gharagh-takammin-<wbr>arronn-konn-bronn-<wbr>tonn-erronn-tuonn-<wbr>thunn-trovarrhoun-awnskawn-<wbr>toohoo-hoordenen-thurnuk
</p>

<h3>日本語</h3>
<p>
		桂の感情は果然硬化し、<wbr><!--
	 -->席をはらって帰国しようとした。<wbr><!--
     -->薩摩側も、なお藩の体面と<wbr><!--
	 -->威厳のために黙している。
</p>

<h3>長い数字と単語</h3>
<p>
	3.1415926535<wbr>8979323846<wbr>2643383279<wbr>5028841971<wbr>6939937510<wbr>5820974944<wbr>5923078164<wbr>0628620899<wbr>8628034825<wbr>3421170679
</p><p>
	Donaudampfschiffahrtselektrizitaten<wbr>hauptbetriebswerk<wbr>bauunterbeamten<wbr>gesellschaft
</p>

日本語の特定の単語中で自動改行させない方法

下のように四字熟語が並んだ段落があります。これらを単語中で改行させないようにするには、どのようにしたら良いでしょうか?


別ウィンドウで表示

<p>
		一期一会、<!--
	 -->温故知新、<!--
	 -->初志貫徹、<!--
	 -->起死回生、<!--
	 -->馬耳東風、<!--
	 -->油断大敵、<!--
	 -->七転八起、<!--
	 -->七転八倒、<!--
	 -->弱肉強食、<!--
	 -->焼肉定食、<!--
	 -->抱腹絶倒
</p>
  • 今のところ(2015年6月)、最適な方法は(例1)だと思います。なお、各「</span>、」の後ろにスペースが入っていることに気を付けましょう。
  • (例2)のように「</span>、」の後ろにスペースを削除すると、なぜかChromeで自動改行されません。
  • また、(例3)のように「</span>」と「、」の間にスペースを入れるとChromeでは、「、」の前で改行されます。
  • なお、幅の広いブラウザで見ると(例1)と(例3)は(例2)よりも長くなっていますが、これはスペースを含んでいるからです。

別ウィンドウで表示

<style>
    .nobr {
        white-space: nowrap;
    }
</style>

<h3>例1</h3>
<p>
		<span class="nobr">一期一会</span>、
		<span class="nobr">温故知新</span>、
		<span class="nobr">初志貫徹</span>、
		<span class="nobr">起死回生</span>、
		<span class="nobr">馬耳東風</span>、
		<span class="nobr">油断大敵</span>、
		<span class="nobr">七転八起</span>、
		<span class="nobr">七転八倒</span>、
		<span class="nobr">弱肉強食</span>、
		<span class="nobr">焼肉定食</span>、
		<span class="nobr">抱腹絶倒</span>
</p>

<h3>例2</h3>
<p>
		<span class="nobr">一期一会</span>、<!--
	 --><span class="nobr">温故知新</span>、<!--
	 --><span class="nobr">初志貫徹</span>、<!--
	 --><span class="nobr">起死回生</span>、<!--
	 --><span class="nobr">馬耳東風</span>、<!--
	 --><span class="nobr">油断大敵</span>、<!--
	 --><span class="nobr">七転八起</span>、<!--
	 --><span class="nobr">七転八倒</span>、<!--
	 --><span class="nobr">弱肉強食</span>、<!--
	 --><span class="nobr">焼肉定食</span>、<!--
	 --><span class="nobr">抱腹絶倒</span>
</p>

<h3>例3</h3>
<p>
		<span class="nobr">一期一会</span> 、<!--
	 --><span class="nobr">温故知新</span> 、<!--
	 --><span class="nobr">初志貫徹</span> 、<!--
	 --><span class="nobr">起死回生</span> 、<!--
	 --><span class="nobr">馬耳東風</span> 、<!--
	 --><span class="nobr">油断大敵</span> 、<!--
	 --><span class="nobr">七転八起</span> 、<!--
	 --><span class="nobr">七転八倒</span> 、<!--
	 --><span class="nobr">弱肉強食</span> 、<!--
	 --><span class="nobr">焼肉定食</span> 、<!--
	 --><span class="nobr">抱腹絶倒</span>
</p>
詳細を開く 詳細を閉じる
詳細を開く詳細を閉じるページの先頭へ