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

構文

/* キーワード値 */
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 は場面によって検討する必要があります。すべてのフォントファミリで自動的に読みやすさを調整する単一の値はありません。

仕様書

仕様書 状態 備考
CSS Text Module Level 3
word-spacing の定義
草案 以前の値を、<spacing-limit> 値で置き換え。この値は、以前と同じ値か、追加された<percentage> 値か、もしくは、最適値・最小値・最大値を表す 3 つまでの値を使って定義します
CSS Transitions
word-spacing の定義
草案 word-spacing をアニメーション可能として定義。
CSS Level 2 (Revision 1)
word-spacing の定義
勧告 変更なし
CSS Level 1
word-spacing の定義
勧告 初回定義

初期値normal
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承あり
パーセンテージ作用する glyph の width
メディア視覚
計算値それぞれ絶対指定の length、percentage、キーワード normalのいずれかである、最適値、最小値、最大値
アニメーションの種類length
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 6Opera 完全対応 3.5Safari 完全対応 1WebView Android ? Chrome Android ? Edge Mobile 完全対応 ありFirefox Android 未対応 なしOpera Android ? Safari iOS ? Samsung Internet Android ?
<percentage> valuesChrome 未対応 なしEdge ? Firefox 完全対応 45IE 未対応 なしOpera 未対応 なしSafari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 45Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, Sebastianz, Prinz_Rana, mitsuba-clover, ethertank, sosleepy
最終更新者: mfuji09,