【white-space】空白・タブ・改行の表示方法

white-spaceプロパティでは、ソース中のホワイトスペース(半角スペース、タブ、改行、ラインフィード、キャリッジリターン、フォームフィード)をどのように表示するか指定することができます。

例えば値に「pre」を指定すると、ソース中での空白(連続する半角スペースやタブなど)や改行は、そのままブラウザ上で表示されます。 また「normal(初期値)」を指定すれば、空白や改行は自動的に調整されて表示されます。 他にも自動的な改行を禁止する「nowrap」という値もあります。

ただしpreはInternet Explorer(IE)5.5以前、nowrapはIE5、Netscape4.7以前のバージョンでは対応していませんので、注意して下さい。

書式

  • white-space : ……… 空白や改行の処理を指定

★:normal、pre、inherit、他下記参照

normal
連続する半角スペースやタブ、改行などをまとめ、1つの半角スペースとして表示。要素の内容はボックスの端で自動的に折り返される(改行される)
pre
半角スペースやタブ、改行などをまとめずにそのまま表示し、HTML文書に入力した通りにブラウザ上で表示される。内容がボックスの端までいっても自動的な改行は行われず、ソース中の改行とcontenプロパティで「¥A」を導入した位置でのみ改行される。
pre-wrap
preと同様の機能。ただし内容がボックスの端までいくと自動的に改行される。
pre-line
normalと同様の機能。ただし内容がボックスの端まで行くと自動的に改行され、HTML文書内で改行した位置でも改行する。
nowrap
連続する半角スペースやタブ、改行などをまとめ1つの半角スペースとして表示する。ただし内容がボックスの端まで行っても自動的な改行はされない。

使用した時の例

.sample1 {white-space: normal;}
.sample2 {white-space: pre;}
.sample3 {white-space: pre-wrap;}
.sample4 {white-space: pre-line;}
.sample5 {white-space: nowrap;}
div {background: #FEE7F0; width:70%;}
<div class="sample1">This  is  a  display  sample  of  white-space.
With this feeling you can choose whether or not to break a line, etc.</div>
<div class="sample2">This  is  a  display  sample  of  white-space.
With this feeling you can choose whether or not to break a line, etc.</div>
<div class="sample3">This  is  a  display  sample  of  white-space.
With this feeling you can choose whether or not to break a line, etc.</div>
<div class="sample4">This  is  a  display  sample  of  white-space. 
With this feeling you can choose whether or not to break a line, etc.</div>
<div class="sample5">This  is  a  display  sample  of  white-space. 
With this feeling you can choose</div>

ブラウザ上の表示例

This is a display sample of white-space. With this feeling you can choose whether or not to break a line, etc.
This is a display sample of white-space. With this feeling you can choose whether or not to break a line, etc.
This is a display sample of white-space. With this feeling you can choose whether or not to break a line, etc.
This is a display sample of white-space. With this feeling you can choose whether or not to break a line, etc.
This is a display sample of white-space. With this feeling you can choose

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

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