テキスト
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 を使います。