hyphens

The hyphens property controls hyphenation of text in block level elements. You can prevent hyphenation from happening at all, allow it, or only allow it when certain characters are present.

Note that hyphens is language-sensitive. Its ability to find break opportunities depends on the language, defined in the lang attribute of a parent element. Not all languages are not supported yet and support depends on the specific browser.

Syntax

p {
  hyphens: none | manual | auto
}

hyphens: none

Words are never hyphenated at at line breaks, even if characters inside the word suggest where hyphenation could or should go.

hyphens: manual

Words are only broken at line breaks where there are characters inside the word that suggest line break opportunities. There are two characters that suggest line break opportunity:

• U+2010 (HYPHEN): the “hard” hyphen character indicates a visible line break opportunity. Even if the line is not actually broken at that point, the hyphen is still rendered. Literally a “-“.
• U+00AD (SHY): an invisible, “soft” hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use ­ to insert a soft hyphen.

hyphens: auto

Words can be broken at appropriate hyphenation points either as determined by hyphenation characters (see above) inside the word or as determined automatically by a language-appropriate hyphenation resource (if supported by the browser or provided via @hyphenation-resource).

Conditional hyphenation characters inside a word, if present, take priority over automatic resources when determining hyphenation points within the word.

hyphens: all

Deprecated, do not use. This was only in the spec temporarily for testing.

Demo

The demo below has a bunch of paragraphs and everything is set to hyphens: auto; to demonstrate the concept of hyphenation. The lang attribute is set to en on the parent element.

<article lang="en">
  <p>As designers attempting to creating functional work, oftentimes we are required to make our designs look as finished as possible.</p>
  <p>For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</p>
  <p>Now in some circumstances, designers may use squares and rectangles to help you visualize what should and could be in a specific location.</p>
  <p>We all have our own techniques, but one of the most effective techniques is to actually put some text where text goes and some pictures where pictures go to make sure everyone can see the vision you%u2019ve created.</p>
  <p>Coming up with filler text on the fly is not easy, but it is becoming more and more of a requirement. Fortunately, some designers and developers around the web know this and have put together a bunch of text generators to help you present your vision.</p>
  <p>Some are standard (like the always popular %u2018Lorem Ipsum%u2019 generators) and some are really fun. Either way, pick one of your favorites from below and start generating text and completing your vision.</p>
</article>

article {
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  text-align: justify;
}

article p {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

Browser Support

Safari 5+ requires -webkit-, Firefox 6+ requires -moz-, IE 10+ requires -ms-, iOS 4.2+ requires-webkit-.

Chrome and Android browser actually support -webkit-hyphens: none, which is the default value, but none of the other values.

In Firefox and Internet Explorer, automatic hyphenation only works for some languages (defined with the lang attribute).

If you are writing a web-based document that really need hyphenation, you can use Hyphenator.js which is a library based on a vast dictionary that will automatically inject soft hyphens and zero-width spaces into your content.

Without JavaScript, you’ll have to rely on both hyphens and word-break. The following will give the best possible browser support (not perfect):

.hyphenate {
 -ms-word-break: break-all;
     word-break: break-all;

     // Non standard for webkit
     word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
        hyphens: auto;
}