A hyphen (-) is a punctuation mark used to join words or separate syllables within a word. The latter comes in handy when a word is just too long, and we need to break it into smaller pieces. In CSS, we control it with the property hyphens.

hypen: manual | auto | none;

Hyphens has three possible values manual, auto and none, that specify how words should be hyphenated when they are too long for its parent container.

Manual

The initial value for hyphen is manual. When it is used we have to give the browser suggestions about where a word may be able to break. If we do not give any suggestions, a word to long for the box will overflow. By using special unicode characters inside a word, we can suggest line break opportunities for the browser. We have two line break characters.

U+2010 HYPHEN

This is the hard hyphen. It indicates a line break opportunity for the browser, but it will always render, even though the line is not broken. To insert it into our HTML, we can use ‐, but it will have the same effect as hitting dash on your keyboard.

U+00AD SHY

The second option is the soft hyphen. It is not rendered visibly, but instead marks where the browser may hyphenate a word not fitting its container. Use ­ in HTML, to insert a soft hyphen.

None

If none is used as value, words will no longer break when we use the soft hyphen ­ to suggest line breaks. Lines will only wrap at whitespace or the hard hyphen, ‐.

Auto

With the value auto, the browser identifies appropriate hyphenation points, where it will break the words. By specifying the language of an element, <p lang="en">, we can help the browser pick better points. Be aware that hyphenation points may vary with different browsers and languages. The browsers hyphenation points can be overridden with the line break character ­.

Snacks

If you are still not happy with how the browsers hyphenates your words, there is some extras snacks available. Here are four CSS properties introduced in CSS Text Module Level 4, that gives us almost an inDesign level of control.

Setting minimum length before and after an hyphen

hyphenate-limit-chars takes three values. The first sets the minimum length of a word that can be hyphenated. The second is the minimum amount of characters a word can have before the hyphenation. The third and finale value limits amount of characters after the hyphen. This can help in the case of the browser hyphenating short words in a manner which makes them hard to read.

/* Only hyphenate words with >= 6 characters,
 leave at least 3 characters before the hyphen and at least 2 after it */
hyphenate-limit-chars: 6 3 2;

Limiting consecutive hyphenated lines

hyphenate-limit-lines limits how many consecutive lines that the browser can hyphenate. If three or more consecutive lines are hyphenated, it forms what is called a ladder. In some languages, e.g. English, it is common to avoid ladders because of aesthetic reasons.

/* Do not allow more than 2 successive hyphenated lines */
hyphenate-limit-lines: 2;

Avoid hyphenating the last line

hyphenate-limit-last can be given the value always to make the browser never hyphenate the last line. This is to avoid having a part of the word sitting alone on the last line.

/* No hyphenation on the last line of each page, column or paragraph. */
hyphenate-limit-last: always;

Breaking Free

Hyphens is pretty simple to use when you combine auto with correct language to enhance your browsers hyphenation. If you also try to master it with the extra properties and line break characters, there's not a star in heaven
that you can't reach.