スタイルシート［CSS］/テキスト・フォント/改行・スペース・タブの扱いを指定する

*white-space: ***;*

ブラウザ
特性: white-space

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


p {
white-space: nowrap;
}

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

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

■normal （標準）

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

■nowrap （自動的な折り返しを禁止する）

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

■pre （記述した通りの形で表示する）

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

内容を整形済みテキストとして表示したい場合は、このプロパティの pre ではなく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: 300px;
border: 1px #808080 solid;
}

p.example {
white-space: nowrap;
}

</style>

</head>
<body>

<p>1つ目の段落は幅いっぱいのところで ...</p>

<p class="example">1つ目の段落は幅いっぱいのところで ...</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>

サイト内検索

テキスト・フォント

改行・スペース・タブの扱いを指定する

white-space: ***;