word-spacing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

word-spacing は CSS のプロパティで、タグや単語の間隔に関する挙動を指定します。

試してみましょう

構文

css
/* キーワード値 */
word-spacing: normal;

/* <length> 値 */
word-spacing: 3px;
word-spacing: 0.3em;

/* グローバル値 */
word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: revert-layer;
word-spacing: unset;

値

normal

現在のフォントやブラウザー―で定義された普通の単語の間隔です。

<length>

フォントによって定義された単語の間隔に追加する間隔を定義します。

アクセシビリティ

word-spacing 値を大きな生または負の値にすると、スタイル設定が適用された文が読みにくくなります。とても大きな正の値でスタイル設定されたテキストでは、単語が離れすぎてしまい、文として現れなくなります。大きな負の値でスタイル設定されたテキストでは、単語が互いに重なり合い、各単語の始めと終わりが認識できなくなります。

読みやすい word-spacing は、フォントファミリーごとに文字幅が異なるため、案件ごとに決定する必要があります。 すべてのフォントファミリーで読みやすさを自動的に保証する値は存在しません。

例

HTML

html
<div id="mozdiv1">Lorem ipsum dolor sit amet.</div>
<div id="mozdiv2">Lorem ipsum dolor sit amet.</div>

CSS

css
#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}

公式定義

初期値normal
適用対象すべての要素。 ::first-letterおよび::first-line にも適用されます。
継承あり
パーセント値作用する文字の幅に対する相対値
計算値絶対的な長さ
アニメーションの種類length

形式文法

word-spacing = 
  normal    |
  <length>

仕様書

Specification
CSS Text Module Level 3
# word-spacing-property
Scalable Vector Graphics (SVG) 2
# WordSpacingProperty

ブラウザーの互換性

BCD tables only load in the browser

関連情報