CSS:white-spaceで空白や改行の表示方法を指定する
CSSで半角スペース、タブ、改行の表示方法を指定する場合は、「white-space」で指定します。 初期値は「normal」です。
使用例
white-space: normal;
white-space: pre;
white-space: pre-wrap;
white-space: nowrap;
値 | 説明 |
---|---|
normal | 連続する半角スペース、タブ、改行をまとめて1つの半角スペースとして表示。 表示内容はボックスの端で自動的に改行されます。 |
pre | 連続する半角スペース、タブ、改行をそのまま表示。入力されたとおりに内容を表示。 表示内容がボックスの端までいっても自動的に改行されません。 |
pre-wrap | 内容がボックスの端で自動的に改行されます。 連続する半角スペース、タブ、改行は「pre」と同じようにそのまま表示されます。 |
nowrap | 連続する半角スペース、タブ、改行をまとめて1つの半角スペースとして表示。 自動的な改行は行われません。 |
white-space サンプル
white-spaceに値を設定して、表示してみます。
ダミーテキストの中には適当に連続した半角スペースやタブを入れています。
white-space: normal; (初期値)
連続した半角スペース、タブ、改行が1つの半角スペースとして表示され、自動的に改行が行われています。
この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
white-space: pre;
連続した半角スペース、タブ、改行がそのまま表示され、自動的な改行は行われません。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
white-space: pre-wrap;
連続した半角スペース、タブ、改行がそのまま表示され、自動的に改行が行われています。
この文章はダミーです。 文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。 この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。
white-space: nowrap;
連続した半角スペース、タブ、改行が1つの半角スペースとして表示され、自動的な改行は行われません。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。