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

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

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

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

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

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

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

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

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