word-spacing

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

この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。

構文

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

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

/* <percentage> 値 */
word-spacing: 50%;
word-spacing: 200%;

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

値

normal

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

length

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

<percentage>

文字の advance width を基準とした追加する間隔の量をパーセントで指定します。

形式文法

normal | <length-percentage>
where 
<length-percentage> = <length> | <percentage>

例

HTML

<div id="mozdiv1">Here are many words...</div>
<div id="mozdiv2">...and many more!</div>

CSS

#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
} 

アクセシビリティの考慮事項

word-spacing で大きな正の値や負の値を設定すると、スタイルが適用される文が読めなくなります。テキストをとても大きな正の値でスタイル付けすると、単語間が離れすぎて文として表示されなくなります。大きな負の数でスタイル付けすると、それぞれの単語の先頭と末尾が互いに重複して、理解できなくなります。

フォントファミリによって文字の幅が異なるため、読みやすい word-spacing は場面によって検討する必要があります。すべてのフォントファミリで自動的に読みやすさを調整する単一の値はありません。

• MDN "WCAG を理解する ― ガイドライン 1.4 の解説"
• Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0

仕様書

ブラウザーの対応