單字間距word-spacing

Setting the spacing between words.

Overview

Examples

Add space between words

Use word-spacing:* for short labels, all-caps headings, or dense text where words need more separation.

<p class="word-spacing:.04em">    Quarterly revenue report</p>

@layer utilities {    .word-spacing\:\.04em {        word-spacing: 0.04em    }}

Use fixed spacing when needed

Any valid CSS length can be used when the spacing needs to match a fixed visual rhythm.

<span class="word-spacing:2px">Invoice total</span>

Avoid overusing wide spacing

Large word spacing can hurt readability in paragraphs. Prefer it for short runs of text.

<p class="word-spacing:0">Long body copy keeps normal word spacing.</p>

Apply conditionally

Apply styles based on different states using selectors and conditional queries.

<p class="word-spacing:.04em:hover word-spacing:0@sm word-spacing:0@print">...</p>