CSS hyphens Property

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.

Example

#

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>

Syntax

hyphens: none | manual | auto | initial | inherit;

Values

#

Value Description
none Does not hyphen words.
manual Default. Hyphen words only at &hyphen; (-) or &shy; ()* 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: &shy; is a hidden character that is used to indicate a potential break point when hyphens:manual; is specified.


More Examples

Click the buttons to see the different hyphens values.

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.
<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&shy;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>

Browser support

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

You may also like

Guides