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>