[ @sdxc/u/typography ]
hyphens
Lets long words break with a hyphen instead of forcing the line short.
import { hyphens } from "@sdxc/u/typography";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.hyphens() | css({ hyphens: "auto" }) |
u.hyphens("manual") | css({ hyphens: "manual" }) |
u.hyphens("none") | css({ hyphens: "none" }) |
Examples
Basic example
Use hyphens() to let the browser hyphenate long words from its dictionary, chosen by the lang attribute on the element or an ancestor:
hyphens()
The committee's recommendations on intergovernmental telecommunications infrastructure were characteristically uncompromising.
hyphens("none")
The committee's recommendations on intergovernmental telecommunications infrastructure were characteristically uncompromising.
<div mix={[...]}>
<div mix={[maxIs(48), ...]}>
<p mix={[...]}>hyphens()</p>
<p lang="en" mix={[hyphens()]}>
The committee's recommendations on intergovernmental telecommunications infrastructure
were characteristically uncompromising.
</p>
</div>
<div mix={[maxIs(48), ...]}>
<p mix={[...]}>hyphens("none")</p>
<p lang="en" mix={[hyphens("none")]}>
The committee's recommendations on intergovernmental telecommunications infrastructure
were characteristically uncompromising.
</p>
</div>
</div>Manual hyphenation
Use hyphens("manual") to break words only where you mark them with a soft hyphen (­), and hyphens("none") to ignore even those:
hyphens("manual")
Kraftfahrzeughaftpflichtversicherung
hyphens("none")
Kraftfahrzeughaftpflichtversicherung
<div mix={[...]}>
<div mix={[maxIs(48), ...]}>
<p mix={[...]}>hyphens("manual")</p>
<p lang="de" mix={[hyphens("manual")]}>
Kraft­fahr­zeug­haft­pflicht­ver­si­che­rung
</p>
</div>
<div mix={[maxIs(48), ...]}>
<p mix={[...]}>hyphens("none")</p>
<p lang="de" mix={[hyphens("none")]}>
Kraft­fahr­zeug­haft­pflicht­ver­si­che­rung
</p>
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.hyphens())Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.hyphens())Signature
u.hyphens(value?: HyphensValue)