CSSで折り返しの表示方法を指定する「white-space」プロパティの使い方

CSSで折り返しの表示方法を指定する「white-space」プロパティの使い方

この記事では、CSSで要素内の行の折り返しや改行の表示を指定する「white-space」プロパティの使い方について解説します。

 

white-spaceプロパティの使い方

white-spaceプロパティは、要素内でのスペースや改行、折り返しをどのように表示するかを指定するプロパティです。

「normal」という値が初期値になっており、何も指定をしなければ「normal」が指定された状態となります。

他に、自動で折り返しをしない「nowrap」などの値を指定することが可能です。

以下に、それぞれの表示の違いを見ていきます。

 

normal

初期値の「normal」は、「要素の幅よりも長いテキストは自動的に折り返して表示される」「複数の半角スペース・改行・タブは一つのスペースとして表示される」ようになります。

つまり、要素のサイズに収まらない長いテキストは、自動的に折り返して表示されます。

また、テキストの改行や複数のスペースは、入力したそのままの状態で反映されるのではなく、一つの空白としてまとめて表示されます。

<p class="normal">
  How to use the  white-space  property.
  How to use 
  the  white-space  property.
</p>
.normal {
white-space: normal;
width: 300px;
background-color: #f7f6f6;
}

ブラウザでの表示

normalの表示例

 

nowrap

「nowrap」は、スペースやタブ、改行が反映されないところはnormalと同じですが、テキストの長さが要素の幅に収まらない場合に折り返して表示されません。

<p class="nowrap">
  How to use the  white-space  property.
  How to use 
  the  white-space  property.
</p>
.nowrap {
white-space: nowrap;
width: 300px;
background-color: #f7f6f6;
}

ブラウザでの表示

nowrapの表示例

※要素の大きさに合わせてテキストが折り返されないため、要素からはみ出して表示されます。この部分は「overflow: hidden;」を指定して非表示にすることも可能です。

 

pre

「pre」は、スペース・改行・タブが入力した通りに反映されます。

ただし、要素に収まらないテキストは自動的に折り返して表示されません。

<p class="pre">
  How to use the  white-space  property.
  How to use 
  the  white-space  property.
</p>
.pre {
white-space: pre;
width: 300px;
background-color: #f7f6f6;
}

ブラウザでの表示

  preの表示例
 

pre-wrap

「pre-wrap」は、「pre」と同じようにスペース・改行・タブがすべて反映されます。

また、テキストは要素のサイズに合わせて自動的に折り返して表示されます。

<p class="pre-wrap">
  How to use the  white-space  property.
  How to use 
  the  white-space  property.
</p>
.pre-wrap {
white-space: pre-wrap;
width: 300px;
background-color: #f7f6f6;
}

ブラウザでの表示

pre-wrapの表示例

 

pre-line

「pre-line」は、改行のみが入力した通りにブラウザ上で表示されます。

複数のスペースやタブは反映されません。

また、テキストは要素のサイズに合わせて自動的に折り返して表示されます。

<p class="pre-line">
  How to use the  white-space  property.
  How to use 
  the  white-space  property.
</p>
.pre-line {
white-space: pre-line;
width: 300px;
background-color: #f7f6f6;
}

ブラウザでの表示

pre-lineの表示例

 

まとめ

以上、行の折り返しやスペースの表示を指定するwhite-spaceの使い方について説明しました。

white-spaceは、デフォルトではnormalという値になります。複数のスペースの入力や改行は一つの空白としてまとめて表示され、要素よりもテキストが長い場合には自動的に折り返して表示されるのが標準の状態となっています。

もし要素内でテキストが自動的に折り返さないようにしたい場合や、スペースをそのまま反映させて表示したい場合などには、white-spaceの他の値を指定して、画面上の表示を調整することが可能です。

cssの書き方カテゴリの最新記事