white-space: ***;

ブラウザ
  • IE
  • Cr
  • Sf
  • Fx
  • O
プロパティ

white-space は、空白類文字(改行、半角スペース、タブ)の扱いを指定するプロパティです。


p {
white-space: nowrap;
}

プロパティ名 説明
white-space normal 標準 (初期値)
nowrap 自動的な折り返しを禁止する
pre 記述した通りの形で表示する

表示モード互換モードの場合は、IEでは pre の指定が機能しません。(標準モードでは機能します)

normal (標準)

  • 連続する半角スペース、改行、タブは、1つの半角スペースにまとめられて表示されます。
  • 幅いっぱいのところで、自動的な折り返しが行われます。

nowrap (自動的な折り返しを禁止する)

  • 連続する半角スペース、改行、タブは、1つの半角スペースにまとめられて表示されます。
  • 自動的な折り返しは行われません。領域の幅を超えたテキストは、はみ出して(または横スクロールで)表示されます。

pre (記述した通りの形で表示する)

  • 連続する半角スペース、改行、タブは、記述した通りの形で表示されます。
  • 自動的な折り返しは行われません。領域の幅を超えたテキストは、はみ出して(または横スクロールで)表示されます。

使用例

nowrapの使用例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

p {
width: 150px;
border: 1px #808080 solid;
}

p.example {
white-space: nowrap;
}

</style>

</head>
<body>

<p>1つ目の段落は折り返しが入ります。</p>

<p class="example">2つ目の段落は折り返しが入りません。</p>

</body>
</html>

表示例

1つ目の段落は折り返しが入ります。

2つ目の段落は折り返しが入りません。

preの使用例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>文書のタイトル</title>

<style type="text/css">

div.example {
margin-bottom: 3em;
white-space: pre;
}

</style>

</head>
<body>

<div class="example">
<code>&lt;script type="text/javascript"&gt;

        document.write("サンプルテキスト");

&lt;/script&gt;</code>
</div>

<div>
<code>&lt;script type="text/javascript"&gt;

        document.write("サンプルテキスト");

&lt;/script&gt;</code>
</div>

</body>
</html>

表示例
<script type="text/javascript"> document.write("サンプルテキスト"); </script>
<script type="text/javascript"> document.write("サンプルテキスト"); </script>