word-spacing
CSS の word-spacing
プロパティは、タグや単語の間隔に関する挙動を指定します。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
構文
/* キーワード値 */
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 および::first-line にも適用されます。 |
継承 | あり |
パーセント値 | 作用する文字の幅に対する相対値 |
計算値 | それぞれ絶対指定の length、percentage、キーワード normal のいずれかである、最適値、最小値、最大値 |
アニメーションの種類 | length |
形式文法
normal | <length-percentage>ここで
<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 の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser