【white-space】改行をしないで表示する

white-spaceプロパティでは、ソース中の半角スペースやタブ、改行などをブラウザ上でどのように表示するか指定することができます。

テーブルのセルや要素内で改行したくない場合は、値に「nowrap」を指定すると、要素内の連続する半角スペースやタブ、改行をまとめて1つの半角スペースに変換して表示し、改行をしないで表示されるようになります。

※内容がボックスの端に行っても自動的な行の折り返しが行われなくなります。セル内の自動的な折り返しを禁止したい場合はth要素td要素に対して指定します。

自動的な折り返しを禁止する以外にも、様々な事ができますが「nowrap」以外の値についてはwhite-spaceのページに記載していますので、そちらを参照下さい。 またnowrapを指定し、ボックスはみ出た内容の表示方法については、overflowプロパティなどで設定します。

書式

  • white-space : nowrap ……… 自動的な行の折り返しを禁止する

normal
連続する複数の半角スペースやタブ、改行を1つの半角スペースとして変換し表示します。内容はボックスの幅に合わせて自動的に折り返されます(改行されます)。これが初期値です。
nowrap
normal同様、半角スペースやタブ、改行を1つの半角スペースに変換し表示しますが、自動的な改行は行われません。

使用した時の例

.sample1 {white-space: normal;}
.sample2 {white-space: nowrap;}
div {background: #FEE7F0; width:70%;}
<div class="sample1">Nowrap is often used in table cells etc. 
Normal, nowrap is displayed like this</div>
<div class="sample2">Nowrap is often used in table cells etc. 
Normal, nowrap is displayed like this</div>

ブラウザ上の表示例

Nowrap is often used in table cells etc. Normal, nowrap is displayed like this
Nowrap is often used in table cells etc. Normal, nowrap is displayed like this

対応ブラウザなどのデータ

初期値 normal 値の継承 継承する
適用可能な要素 すべての要素
メディア visual / text
対応ブラウザ Internet Explorer6~ , Google Chrome1~ , Firefox1~ , Opera4~ , Safari1~