page icon

CSS white-space テキストの表示方法を制御する。

 

概要

は、CSS のプロパティ の値の一つで、テキストの表示方法を制御します。このプロパティは、テキストの折り返しや空白の処理方法を指定するために使用されます。
 

プロパティ

プロパティには以下のような値があります:
  • : デフォルト値。テキストは必要に応じて改行され、複数の空白は一つにまとめられます。
  • : テキストは改行されず、一行に表示されます。必要に応じて横スクロールが発生します。
  • : テキストはHTMLで書かれたとおりに表示され、改行や複数の空白もそのまま表示されます。
  • : テキストは改行されず、複数の空白もそのまま表示されますが、親要素の幅を超える場合は改行されます。
  • : 複数の空白は一つにまとめられますが、改行はそのまま表示されます。
  • : 改行と空白を保持し、単語の途中で改行することが許可されます。
 

の動作

を設定すると、以下のようにテキストが表示されます:
  1. テキストは改行されず、一行で表示されます。
  1. テキストが親要素の幅を超える場合は、横スクロールが発生します。
  1. 複数の空白もそのまま表示されます。

このテキストは改行されず、一行で表示されます。親要素の幅を超える場合は、横スクロールが発生します。
 
上記の例では、 が設定された 要素内のテキストは一行で表示され、親要素の幅を超える部分は横スクロールが発生します。
 

実際の用途

は、テキストが自動的に改行されるのを防ぎたい場合に使用されます。例えば、次のような状況で役立ちます:
  • ナビゲーションバーのリンクテキスト
  • ボタンやタグのラベル
  • テーブルのセル内のテキスト
  • 水平スクロールを前提としたレイアウト
このプロパティを使用することで、特定のUI要素内でテキストが一貫して表示されるように制御できます。
 

 
 
 
その他 関連記事
 
 
 
 
☑ New Post

 
Icons by icons8.com