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 2015年7月.
word-spacing は CSS のプロパティで、タグや単語の間隔に関する挙動を指定します。
試してみましょう
word-spacing: normal; word-spacing: 1rem; word-spacing: 4px; word-spacing: -0.4ch; <section id="default-example"> <p id="example-element"> As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill. </p> </section> @font-face { src: url("/shared-assets/fonts/variable-fonts/AmstelvarAlpha-VF.ttf"); font-family: Amstelvar; font-style: normal; } section { font-size: 1.2em; font-family: Amstelvar; } 構文
css
/* キーワード値 */ word-spacing: normal; /* <length> 値 */ word-spacing: 3px; word-spacing: 0.3em; /* グローバル値 */ word-spacing: inherit; word-spacing: initial; word-spacing: revert; word-spacing: revert-layer; word-spacing: unset; 値
アクセシビリティ
word-spacing 値を大きな生または負の値にすると、スタイル設定が適用された文が読みにくくなります。とても大きな正の値でスタイル設定されたテキストでは、単語が離れすぎてしまい、文として現れなくなります。大きな負の値でスタイル設定されたテキストでは、単語が互いに重なり合い、各単語の始めと終わりが認識できなくなります。
読みやすい word-spacing は、フォントファミリーごとに文字幅が異なるため、案件ごとに決定する必要があります。 すべてのフォントファミリーで読みやすさを自動的に保証する値は存在しません。
例
HTML
html
<div id="mozdiv1">Lorem ipsum dolor sit amet.</div> <div id="mozdiv2">Lorem ipsum dolor sit amet.</div> CSS
css
#mozdiv1 { word-spacing: 15px; } #mozdiv2 { word-spacing: 5em; } 公式定義
| 初期値 | normal |
|---|---|
| 適用対象 | すべての要素。 ::first-letterおよび::first-line にも適用されます。 |
| 継承 | あり |
| パーセント値 | 作用する文字の幅に対する相対値 |
| 計算値 | 絶対的な長さ |
| アニメーションの種類 | length |
形式文法
word-spacing =
normal |
<length-percentage>
<length-percentage> =
<length> |
<percentage>
仕様書
| Specification |
|---|
| CSS Text Module Level 3 # word-spacing-property |
| Scalable Vector Graphics (SVG) 2 # WordSpacingProperty |