word-spacing

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 を基準とした追加する間隔の量をパーセントで指定します。

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

公式定義

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

形式文法

normal | <length-percentage>

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

仕様書

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

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
word-spacingChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 1IE 完全対応 6Opera 完全対応 3.5Safari 完全対応 1WebView Android 完全対応 37Chrome Android 完全対応 18Firefox Android 完全対応 4Opera Android 完全対応 14Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
<percentage> valuesChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 45IE 未対応 なしOpera 未対応 なしSafari 完全対応 6.1WebView Android 未対応 なしChrome Android 未対応 なしFirefox Android 完全対応 45Opera Android 未対応 なしSafari iOS 完全対応 6.1Samsung Internet Android 未対応 なし
SVG supportChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 72IE 完全対応 9Opera 完全対応 7Safari 完全対応 5.1WebView Android 完全対応 ≤37Chrome Android 完全対応 18Firefox Android 未対応 なしOpera Android 完全対応 14Safari iOS 完全対応 5.1Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応
未対応  
未対応

関連情報