Adding Hyphens to Text with the CSS hyphens Property

css
Published on April 3, 2019

It is a common practice to break lines by introducing a hyphen character - between a word so that more numbers of characters can be adjusted in a line.

In web pages this is done with the CSS hyphens property. With this property you can :

  • allow browsers to add hyphens wherever required
  • tell browsers to add a hyphen only at a specific point in the word
  • disallow adding any hyphens

hyphens property can have 3 values :

  1. manual : You specifically add a ‐ or ­ entity in the word where you would like the browser to add a hyphen.
  2. auto : Browser breaks words according to the rules of the language dictionary.
    However if ‐ or ­ entities are present, they they will overide the auto behaviour.
  3. none : Words will never be broken at line breaks. So no hyphens are introduced.

hyphens: auto

hyphens: auto tells the browser to add hyphens at line breaks as per the rules of the language.

For example in the English language, when the word "required" is hyphenated, it becomes "re-quired". Not "requ-ired" or "requir-ed". This is as per the dictionary of the English language.

Obviously when the browser is breaking words according to the rules of the language, it needs to know the language of the current text. The language can be specified with the lang attribute. This can be set on individual elements or on the root <html> element.

<html lang="en">
<div id="container" lang="en"></div>

Demo

This is a demo container that includes a long word antidisestablishmentarianism. Another long word is pneumonoultramicroscopicsilicovolcanoconiosis. Browser will add hypens wherever required so that space is saved.

HTML & CSS :

<div id="demo-container" lang="en">This is a demo container that includes a long word 
antidisestablishmentarianism. Another long word is pneumonoultramicroscopicsilicovolcanoconiosis. 
Browser will add hypens wherever required so that space is saved.</div>
#demo-container {
	width: 300px;
	hyphens: auto;
}

Important : Without the lang attribute, hyphens: auto will not work.

hyphens: manual

With hyphens: manual you can tell the browser where exactly to add hyphens if the word is broken. Two entities give such a hint to the browser :

  • &shy; : This a "shy" hyphen. If the word is broken, hyphen character will be added at that point. If word is not broken then no hyphen character is added.

    For example consider the below sentence :

    There are many long words in English, like psychoneuroendo&shy;crinological.

    When rendered it becomes :

    There are many long words in English, like psychoneuroendo­crinological.
  • &hyphen; : This a "hard" hyphen. The hyphen character will be shown at that point even if the word is not broken.

    For example consider the below sentence :

    There are many long words in English, like psychoneuroendo&hyphen;crinological

    When rendered it becomes :

    There are many long words in English, like psychoneuroendo‐crinological

    The hyphen character will be shown regardless the word is broken or not.

hyphens: none

Browser will never add a hyphen at line breaks even though there may be a chance.

The "hard" hyphen added with &hyphen; will still be displayed though. "Soft" hyphens &shy; will not be displayed.

In this Tutorial