The hyphens property specifies how words break at the end of a line.
One option is to hyphenate, with a hyphen (-), at specified text positions.
Another is to disallow hyphenation, or let the browser handle it entirely.
A paragraph with hypens set to auto.
The browser decides where hyphens are added.
Paul Cézanne was a French artist and Post-Impressionist painter whose work laid the foundations of the transition from the 19th-century conception of artistic endeavor to a new and radically different world of art in the 20th century.
<style>
.paragraph {
border: 1px solid steelblue;
padding: 15px;
width: 250px;
hyphens: auto;
}
</style>
<p class="paragraph">
Paul Cézanne was a French artist and
Post-Impressionist painter whose work
laid the foundations of the transition
from the 19th-century conception of
artistic endeavor to a new and
radically different world of art in
the 20th century.
</p>
hyphens: none | manual | auto | initial | inherit;
| Value | Description |
|---|---|
| none | Does not hyphen words. |
| manual | Default. Hyphen words only at ‐ (-) or ­ ()* positions. |
| auto | Hyphen words with the browser deciding the best break points. |
| initial | Sets the value to its default value. |
| inherit | Inherits the value from its parent element. |
* Note: ­ is a hidden character that is used to
indicate a potential break point when hyphens:manual; is specified.
Click the buttons to see the different hyphens values.
<style>
.hyp {
border: 1px solid steelblue;
padding: 15px;
width: 255px;
hyphens: none;
}
</style>
<div class="hyp">
Paul Cézanne was a French artist and
Post-Impres­sionist painter whose work
laid the foundations of the transition
from the 19th-century conception of
artistic endeavor to a new and
radically different world of art in
the 20th century.
</div>
This table shows when hyphens support started for each browser.
 Chrome
|
55.0 | Dec 2016 |
 Firefox
|
43.0 | Dec 2015 |
 IE/Edge
|
10.0 | Sep 2012 |
 Opera
|
44.0 | Mar 2017 |
 Safari
|
5.1 | Oct 2011 |
