HTMLタグ/CSS一覧と初心者向けホームページ作成解説集:HTMLタグボード

HTMLタグボードのトップへ戻る ゼロから始めるホームページ作成講座 訪問者優位のWEBデザインTips インターネットで小遣い稼ぎ 今すぐ使える!便利ツール(HTMLタグ辞典など)


スペースの表示方法を変える

CSSの書き方

white-space:値 ;

CSSの詳細情報
プロパティ名 white-space 読み方 ホワイト・スペース
初期値 ブラウザに依存 意味 スペースや改行の表示方法の指定
normal/pre/nowrap
対象 すべての要素
CSSレベル CSSレベル1 対応ブラウザ Windows MAC
継承 する IE 5.0以上()/FF1.0/NS7.1/OP8.0 SF/IE5.0

解説

「white-space」プロパティは、HTML文書内に記述されている半角スペースや改行、タブが連続している場合、その(見えない)スペースをそのまま表示するか、無視して表示しないかを指定するスタイルシートです。表示方法は以下の3種類です。ただし、全角スペースは対象となりません。

設定できる値 表示内容
normal 連続するスペース/タブ/改行は、1つのスペースに置き換えられる。文字列がボックスの幅を超える場合は、ボックスの右端で折り返される
pre スペース/タブ/改行は変換されず、そのまま表示される。文字列がボックスの幅を超える場合は、ボックスからはみ出して表示される
nowrap 連続するスペース/タブ/改行は、1つのスペースに置き換えられる。文字列がボックスの幅を超える場合は、ボックスからはみ出して表示される

※引用元:藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P116、2005

InternetExplorerの対応状況

InternetExplorerでは「white-space」プロパティの値すべては対応していません。以下のような対応状況となっています。なお、InternetExplorer以外のブラウザではすべての値が対応しています。

IE 5.5 IE6.0
normal
pre × △※1.2
nowrap ○※2 ○※2

※1 標準モードの場合にのみ動作

※2 文字列がボックスからはみ出す場合は、ボックスの幅が文字列の幅に合わせて拡大される。

※引用元:藤本 壱、スタイルシート ポケットリファレンス、技術評論社、P116、2005

CSS/HTMLサンプル

p.nol { white-space:normal; }
p.pre { white-space:pre; }
p.now { white-space:nowrap; }

段落要素に含まれるホワイトスペースの表示処理を指定 サンプル