文字與排版

斷詞hyphens

Set how to split words to improve the layout of paragraphs.

Examples

Use hyphens:auto for narrow text columns where long words can otherwise create uneven lines.

<p lang="en" class="hyphens:auto">    Antidisestablishmentarianism can hyphenate when the browser has language data.</p>

Generated CSS

@layer utilities {    .hyphens\:auto {        hyphens: auto    }}

Use hyphens:manual when the content includes soft hyphens or explicit hyphenation decisions.

<p class="hyphens:manual">trans&shy;formation</p>

Use hyphens:none for codes, product names, or text where inserted hyphens would change meaning.

<code class="hyphens:none">MASTERCSS_RUNTIME_TOKEN</code>

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

<p class="hyphens:auto hyphens:none@sm hyphens:none@print">...</p>

Setting the weight of the font.

Setting the spacing between text characters.