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;
/* <percentage> 値 */
word-spacing: 50%;
word-spacing: 200%;
/* グローバル値 */
word-spacing: inherit;
word-spacing: initial;
word-spacing: revert;
word-spacing: unset;
値
normal
-
現在のフォントやブラウザ―で定義された普通の単語の間隔です。
<length>
-
フォントによって定義された単語の間隔に追加する間隔を定義します。
<percentage>
-
文字の advance width を基準とした追加する間隔の量をパーセント値で指定します。
例
HTML
html
<div id="mozdiv1">Here are many words...</div>
<div id="mozdiv2">...and many more!</div>
CSS
css
#mozdiv1 {
word-spacing: 15px;
}
#mozdiv2 {
word-spacing: 5em;
}
アクセシビリティの考慮
word-spacing
で大きな正の値や負の値を設定すると、スタイルが適用される文が読めなくなります。テキストをとても大きな正の値でスタイル付けすると、単語間が離れすぎて文として表示されなくなります。大きな負の数でスタイル付けすると、それぞれの単語の先頭と末尾が互いに重複して、理解できなくなります。
フォントファミリーによって文字の幅が異なるため、読みやすい word-spacing
は場面によって検討する必要があります。すべてのフォントファミリーで自動的に読みやすさを調整する単一の値はありません。
公式定義
初期値 | normal |
---|---|
適用対象 | すべての要素。 ::first-letter および::first-line にも適用されます。 |
継承 | あり |
パーセント値 | 作用する文字の幅に対する相対値 |
計算値 | 絶対的な長さ |
アニメーションの種類 | length |
形式文法
仕様書
Specification |
---|
CSS Text Module Level 3 # word-spacing-property |
ブラウザーの互換性
BCD tables only load in the browser