空白文字(半角スペース、改行、タブ)の表示に関わる[css]white-spaceのふるまい。

white-spaceに関して、以下の状態説明は、IE以外のモダンブラウザ(Firefox、Google chrome、Safri)のふるまい。IE(5.5〜8)は、white-spaceを理解できない模様、加えて親要素を無理矢理広げてしまう。css3にあわせて各ブラウザ用にハックを入れた(4)のみ他のブラウザと同様に。親要素は(4)のサイズが正しいサイズ。

プログラムなどのソースを記載するpreタグを使用して、一行が長いcssを記述。ソースは、文頭にタブ1、"Hiragino…"の前と"MS Pゴシック"の前で改行。

(1)「 white-space: nowrap; 」にすると、親要素からとび出す。改行は反映されない。
	font:13px/1.6 "ヒラギノ角ゴ Pro W3",
				"Hiragino Kaku Gothic Pro","メイリオ",Meiryo,
				"MS Pゴシック",sans-serif;

(2)「 white-space: normal; 」(デフォルト)にすると、親要素内に収まる。改行は反映されない。ソースが意図せぬところで折り返される。
	font:13px/1.6 "ヒラギノ角ゴ Pro W3",
				"Hiragino Kaku Gothic Pro","メイリオ",Meiryo,
				"MS Pゴシック",sans-serif;

(3)「 white-space: pre; 」意図したところで折り返されるが、空白文字がそのまま表示される。結果、親要素からとび出している。
	font:13px/1.6 "ヒラギノ角ゴ Pro W3",
				"Hiragino Kaku Gothic Pro","メイリオ",Meiryo,
				"MS Pゴシック",sans-serif;

(4)「 white-space: pre-wrap; 」css3の指定。意図したところで折り返され、親要素内に収まるものの、空白文字がそのまま表示される。
	font:13px/1.6 "ヒラギノ角ゴ Pro W3",
				"Hiragino Kaku Gothic Pro","メイリオ",Meiryo,
				"MS Pゴシック",sans-serif;

(5)「 white-space: nowrap; 」+「 overflow: auto; 」として横スクロールさせる。
	font:13px/1.6 "ヒラギノ角ゴ Pro W3",
				"Hiragino Kaku Gothic Pro","メイリオ",Meiryo,
				"MS Pゴシック",sans-serif;

white-spaceの値指定
  • nowrap:連続する複数の空白文字を一つの半角スペースとして表示。自動折り返し無し。
  • normal:デフォルト。連続する複数の空白文字を一つの半角スペースとして表示。自動で折り返し。
  • pre:連続する複数の空白文字をそのまま表示。
  • pre-wrap:css3の指定。