初級篇★ページ作りの基礎知識２. スタイルシートを使ってみよう

VOL8. テキスト表示に関する設定　その4 ★ HTML上の空白と改行の処理

white-space: <値>;

通常、内容が画面の横幅を越える長さの場合は自動的に改行して表示されますが、これを改行させないように設定することができます。また、テーブルのセル内容にも同様に適用して改行を制限することができます。<値>は、以下の2つのキーワードで指定します。

nowrap ... 改行せずに表示されます。

normal ... 改行して表示されます。（デフォルト）

ex. 

p { white-space: nowrap; }

※<値>が、「nowarp、normal」の時は、どちらもHTML上の記述に含まれる空白や改行は表示に反映されませんが、HTML上で記述されている通りに空白や改行を表示させたい場合があります。それには「white-space:」に<値>として「pre」を指定します。

pre ... HTML上で記述されたまま、改行や空白が無視されずに画面表示に反映されます。

ex. 

p { white-space: pre; } を適用

但し、「pre」はＩＥでは5.5以前では動作せず、6.0でもドキュメントタイプの記述がなかったり、不完全であったりすると互換モードが適用されるため、表示が変わってくる場合があります。また、適用するセレクタによって表示が変わることもあるので、注意が必要です。（cf.「Column3.ドキュメントタイプについて」）

初級篇2.VOL8. テキスト表示に関する設定・その3 <<

>> 初級篇2.VOL9. 配置に関する設定・その1