white-spaceプロパティ

TOPページに戻る > CSS

white-spaceプロパティ

文章の折り返しの設定、空白や改行、Tabの表示を指定できます
white-spaceプロパティのデフォルト値はnormalです。

使い方（書式）

セレクタ { white-space: 値; }                                    

white-spaceプロパティ

対応ブラウザ
適用できる要素	全てのhtml要素
子要素へのスタイルの継承	する

プロパティの値	説明
nowrap	折り返しされなくなります。自動改行を無効にします
normal	通常の値、折り返しされます。Tab、改行は表示に反映されません。半角スペースは連続で何個書いても1つとして置き換えられます。自動改行は有効になります
pre	改行、Tab、連続した半角スペースを表示できます。自動改行は無効になります
pre-wrap	改行、Tab、連続した半角スペースを表示できます。自動改行は有効になります IE6、IE7が未対応、IE8から対応
pre-line	改行のみ表示。Tab、連続した半角スペースは非表示。自動改行は有効になります IE6、IE7が未対応、IE8から対応

実際の指定方法

.hoge { white-space: nowrap; }   /* 自動改行を無効、改行、Tab、連続した半角スペースを無効 */

.hoge2 { white-space: normal; }   /* 自動改行を有効、改行、Tab、連続した半角スペースを無効 */

.hoge3 { white-space: pre; }      /* 自動改行は無効、改行、Tab、連続した半角スペースを有効 */

.hoge4 { white-space: pre-wrap; } /* 自動改行は有効、改行、Tab、連続した半角スペースを有効 */

.hoge5 { white-space: pre-line; } /* 自動改行は有効、改行は有効、
                                Tab、連続した半角スペースを無効 */

.hogebox {
 width: 200px;              /* 横幅を200pxに指定 */
 border: solid 1px #FF6600; /* 枠線を表示 */
   }

html部分

<div class="hogebox">
<p class="hoge">値はnowrap 
ここで改行 連続した半角スペース→                 ←半角スペース Tab→	←Tab</p>
<p class="hoge2">値はnormal 
ここで改行 連続した半角スペース→                 ←半角スペース Tab→	←Tab</p>
<p class="hoge3">値はpre 
ここで改行 連続した半角スペース→                 ←半角スペース Tab→	←Tab</p>
<p class="hoge4">値はpre-wrap 
ここで改行 連続した半角スペース→                 ←半角スペース Tab→	←Tab</p>
<p class="hoge5">値はpre-line 
ここで改行 連続した半角スペース→                 ←半角スペース Tab→	←Tab</p>
</div>

実際の表示

nowrapとpreは自動改行しないのでboxを突き抜けます
自動改行とはboxの端までいった文字がはみ出さないように次の行に自動改行すること
ここで改行←Enterで改行したとゆうことです　（改行コードのこと、自動改行とは違います）