テキスト

word-spacing

word-spacing は、単語の間の空白に足す幅を指定します。負の値にすると単語の間が詰まります。

構文

normal | <length>

プレビュー

The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
プリセット
右下の角をドラッグするとサイズを変えられます

コード

.box {
  word-spacing: 0.5em;
}

コントロール

word-spacing0.5em
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。

解説

値の書き方

normal(何も足さない)か、0.5em や 4px のような長さで書きます。em はその要素の文字の大きさが基準です。初期値は normal です。

letter-spacing との違い

letter-spacing は文字ごとに空きを足しますが、word-spacing は空白の文字にだけ足します。英語なら単語の間だけが広がり、単語の中の文字の間隔は変わりません。

日本語にはほとんど効かない

日本語の文章は単語の間に空白を入れないので、word-spacing を指定しても見た目はほとんど変わりません。全角スペースにも効きません。日本語の字間を変えたいときは letter-spacing を使います。