white-space - 空白や改行，タブの表示形式を指定する

ライター　福田和宏

2009.12.11

構文

white-space : 値;

説明文

　「white-space」は，連続する空白などの表示形式を指定する。通常，連続する空白やタブを1つの空白に縮めて表示する。もし，空白やタブをそのままの状態で表示したい場合は「pre」を指定すればよい。例えば，プログラムやHTMLのリストなどを記述したい場合に利用できる。

　また，通常は1行が画面に収まらない場合は適当な位置で折り返して次の行に続きを表示する。これに対し，「nowarp」を指定すると，1行に収まらない場合でも折り返しをせずに表示するようになる。

　white-spaceでは以下のような値が指定できる。

値	意味
normal	連続する半角スペースやタブ，改行を1つのスペースとして表示する。また，1行が画面に収まらない場合は，自動的に折り返して次の行に表示する
nowrap	連続する半角スペースやタブ，改行を1つのスペースとして表示する。また，1行が画面に収まらない場合でも折り返しをしない
pre	スペースや改行，タブをそのまま表示する。また，1行が画面に収まらない場合でも折り返しをしない

使用例

● CSSの定義

table { border-collapse : collapse; }
th,td { border : 1px solid black; 
        padding : 5px; }
td { white-space : nowrap; }

● HTMLの例

<h2>日経BP社のWebサイト一覧</h2>
<table>
<tr>
	<th>サイト名</th>
	<th>URL</th>
	<th>管理媒体</th>
</tr>
<tr>
	<td>NBOnline</td>
	<td>http://business.nikkeibp.co.jp/</td>
	<td>日経ビジネス</td>
</tr>
<tr>
	<td>PCOnline</td>
	<td>http://pc.nikkeibp.co.jp/</td>
	<td>日経パソコン</td>
</tr>
<tr>
	<td>TRENDY net</td>
	<td>http://trendy.nikkeibp.co.jp/</td>
	<td>日経ドレンディ</td>
</tr>
<tr>
	<td>日経Linux</td>
	<td>http://linux.nikkeibp.co.jp/</td>
	<td>日経Linux</td>
</tr>
</table>

● 表示結果

Internet Explorerの表示例