hyphens
Automatic hyphenation of words at line ends.
Syntax
hyphens: auto;Values
| Parameter | Type | Description |
|---|---|---|
| manual | keyword | Only where the text contains a soft hyphen `­` (the default). |
| auto | keyword | The browser hyphenates by the rules of the language. |
| none | keyword | Never hyphenate. |
Examples
Hyphenation in a narrow justified column:
<style>
p { width: 140px; border: 1px solid lightgray; text-align: justify; }
</style>
<p lang="en" style="hyphens: auto;">Internationalization requires extraordinarily comprehensive documentation.</p>Notes
hyphens: auto needs the language in the lang attribute — on the element or on <html>. Without it, or for a language the browser has no dictionary for, nothing happens.
See also
- overflow-wrap — Allows a long word to break so that it does not stick out of its block.
- text-align — Horizontal alignment of text and inline content inside a block.
- word-break — Whether words may be broken between any two letters.
Related recipes
In the tutorial
- Text and fonts — Font family, size, weight, italics, line height, alignment and text decoration, plus loading your own font.