CSSで文字間と単語間の余白を設定するletter-spacing、word-spacing、white-space

CSSのletter-spacing、word-spacing、white-spaceは、テキストの間隔と空白を制御するためのプロパティです。

文字の間隔にスペースを設定する属性。負の値を指定するとスペースが減少し、正の値を指定するとスペースが増加します。デフォルトはnormalです。

word-spacing 属性は単語間の距離を設定します。負の値を使って距離を減らしたり、正の値を使って距離を増やしたりすることができます。デフォルト値は normal です。

空白処理を制御する CSS の white-space プロパティは、次のような値を取り得ます:

  1. 標準値:何も入力しないとブラウザでは無視され、余分な空白は1つの空白にまとめられます。
  2. nowrap:空白はブラウザで無視され、テキストは改行されません。
  3. そのまま空白を残し、テキスト内のスペースや改行を含むようにします。
  4. 空白はブラウザで処理されるが、連続した空白は1つの空白としてマージされ、テキストが折り返される。
  5. pre-wrap:空白は残したまま、テキストはそのまま保持され、空白は処理され、テキストは折り返されます。

CSSスタイルシートのセレクタで設定できます。例えば、

p {
letter-spacing: 2px;
word-spacing: 4px;
white-space: nowrap;
}

上記のコードはp要素内のテキストの文字間隔を2px、単語間隔を4pxに設定し、テキストの折り返しが発生しないようにします。

bannerAds