CSSで文字間と単語間の余白を設定するletter-spacing、word-spacing、white-space
CSSのletter-spacing、word-spacing、white-spaceは、テキストの間隔と空白を制御するためのプロパティです。
文字の間隔にスペースを設定する属性。負の値を指定するとスペースが減少し、正の値を指定するとスペースが増加します。デフォルトはnormalです。
word-spacing 属性は単語間の距離を設定します。負の値を使って距離を減らしたり、正の値を使って距離を増やしたりすることができます。デフォルト値は normal です。
空白処理を制御する CSS の white-space プロパティは、次のような値を取り得ます:
- 標準値:何も入力しないとブラウザでは無視され、余分な空白は1つの空白にまとめられます。
- nowrap:空白はブラウザで無視され、テキストは改行されません。
- そのまま空白を残し、テキスト内のスペースや改行を含むようにします。
- 空白はブラウザで処理されるが、連続した空白は1つの空白としてマージされ、テキストが折り返される。
- pre-wrap:空白は残したまま、テキストはそのまま保持され、空白は処理され、テキストは折り返されます。
CSSスタイルシートのセレクタで設定できます。例えば、
p {
letter-spacing: 2px;
word-spacing: 4px;
white-space: nowrap;
}
上記のコードはp要素内のテキストの文字間隔を2px、単語間隔を4pxに設定し、テキストの折り返しが発生しないようにします。