hyphens
Controls whether hyphens (-) are inserted when words break across lines. hya lets the browser add hyphens automatically, and requires the HTML lang attribute.
Class List
| Class | CSS | Description |
|---|---|---|
hyn | hyphens: none | No hyphen insertion, ­ also ignored |
hya | hyphens: auto | Browser automatically inserts hyphens (lang attribute required) |
hym | hyphens: manual | Hyphens inserted only at ­ positions (default) |
Visual Comparison
Compares how long English words are handled in narrow containers.
None — hyn
Words break without hyphens
Auto — hya
Browser adds hyphens at appropriate positions
Manual (default value) — hym
Hyphens inserted only at ­ positions
Class Details
hynhyphens: none
Does not insert hyphens. ­ soft hyphens are also ignored.
<!-- No hyphens -->
<p class="hyn owbw w20rem">
Internationalizationwraps without hyphens.
</p>hyahyphens: auto
The browser references a language dictionary to automatically insert hyphens at appropriate positions. The lang attribute must be set.
<!-- Auto hyphens (lang required) -->
<p class="hya owbw w20rem" lang="en">
Internationalization wraps at
appropriate positions with hyphens.
</p>
<!-- HTML lang attribute required -->
<html lang="en">
<body>
<p class="hya">Auto hyphens work here</p>
</body>
</html>lang attribute required
hya does not work without a language attribute like lang="en" on the HTML element. Usually set on <html lang="ko">.
hymhyphens: manual
Default value. Only inserts hyphens at positions with ­(soft hyphens) or ‐(hard hyphens).
<!-- Manual hyphens: only at ­ positions -->
<p class="hym owbw w20rem">
Inter­natio­nali­zation has
hyphens inserted only at ­ positions.
</p>Tips & Notes
Use with overflow-wrap
Combining owbw hya adds hyphens when words break, improving readability.
Limited effect in Korean
Korean naturally wraps at syllable boundaries, so hya has limited effect. Mainly useful for languages with long words like English, German, etc.