CSS Hyphens Property Sample

Available in Chrome 55+ | View on GitHub | Browse Samples

Background

In many written languages, it's possible to break lines between syllables as well as between words. This is often done so that more characters may be placed on a line of text with the goal of having fewer lines in a text area, and thus saving space. In such languages the break is indicated visually with a hyphen ('-').

The CSS Text Module Level 3 defines a hyphens property to control when hyphens are shown to users and how they behave when shown. Per the specification, the hyphens property has three values: none, manual, and auto. The use and behavior of each is shown and illustrated below.

Notice that two of the text samples contain a soft hyphen (­) between the syllables of elit. A soft hyphen is one that will only be shown when it occurs at the trailing margin. In the first example, the hyphens property is set to none. This prevents the soft hyphen from ever being displayed. You can confirm this by adjusting the window size so that the word 'elit' will not fit in the visible line of text.

In the second example, the hyphens property is set to manual meaning the soft hyphen will only appear when the margin breaks the word 'elit'. Again, you can confirm this by adjusting the window size.

In the third example, the hyphens property is set to auto. In this case, no soft hyphen is needed since the user agent will determine hyphen locations automatically. If you resize the window, you'll see that the browser hyphenates the third example in the same place as in the second example, though no soft hyphen is present. If you continue to shrink the window, you'll see that your browser is able to break lines between any two syllables in the text.

CSS Snippet

div {
  font: 18px serif;
  margin-bottom: 2.5%;
}

div.none {
   -webkit-hyphens: none;
   hyphens: none;
}

div.manual {
   -webkit-hyphens: manual;
   hyphens: manual;
}

div.auto {
   -webkit-hyphens: auto;
   hyphens: auto;
}

HTML Snippet

  <div class="none">
    Google ipsum dolor sit amet, consectetur adipiscing e&shy;lit.
  </div>
  
  <div class="manual">
    Google ipsum dolor sit amet, consectetur adipiscing e&shy;lit.
  </div>
  
  <div class="auto">
    Google ipsum dolor sit amet, consectetur adipiscing elit.
  </div>