X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS hyphens Property

The hyphens property defines how words should be hyphenated when text wraps across the lines of text.

The hyphens property has three values: none, manual, auto. It allows to prevent hyphenation or allow it, or only allow it when certain characters are present.

Hyphenation works only when the span attribute is specified because hyphens are language-specific and each language has its own rules for hyphenation.

The rules of hyphenation are not explicitly defined in the specification, so the hyphenation varies from browser to browser.

Initial Value manual
Applies to All elements.
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax Object.style.hyphens = "none";

Syntax

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

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p { 
      width: 55px;
      border: 1px solid #666;
      }
      p.none {
      -webkit-hyphens: none;
      -ms-hyphens: none;
      hyphens: none;
      }
      p.manual {
      -webkit-hyphens: manual;
      -ms-hyphens: manual;
      hyphens: manual;
      }
      p.auto {
      -webkit-hyphens: auto;
      -ms-hyphens: auto;
      hyphens: auto;
      }
    </style>
  </head>
  <body>
    <h2>Hyphens property example</h2>
    <h3>none</h3>
    <p class="none">An extreme&shy;ly lengthy sentence</p>
    <h3>manual</h3>
    <p class="manual">An extreme&shy;ly lengthy sentence</p>
    <h3>auto</h3>
    <p class="auto">An extreme&shy;ly lengthy sentence</p>
  </body>
</html>

In the given example all three values are included so as to see the differences.

For maximum browser compatibility extension such as -webkit- for Safari is used.

Values

Value Description
none No hyphenation. Words are not broken at line breaks, even if the characters suggest line break points.
manual Words are broken only for line-wrapping where there are line break opportunities inside the word. Words are only hyphenated at ‐ or ­. This is the default value of this property.
auto The browser automatically breaks words at appropriate hyphenation points. Words are hyphenated where the algorithm is deciding. The auto value’s behavior depends on the language.
initial Makes the property use its default value.
inherit Inherits the property from its parents element.

Browser support

55.0 partial 12.0 -ms- 43.0+
6 - 42 -moz-
5.1 -webkit- 42.0 partial


Do you find this helpful?

Related articles