How to Enhance Text Flow with CSS3 Hyphenation

By . in Coding. Updated on .

Hyphenation becomes essential when dealing with narrow page or column widths that cannot fully accommodate lines of text. It helps achieve even paragraph alignment and spacing, while reducing the occurrence of ‘rivers’-gaps created by word breaks.

For comparison, observe the word spacing in the following screenshot.

While print media has utilized paragraph hyphenation for ages, it’s only recently that web paragraphs can be hyphenated using a CSS3 property named hyphens. However, browser support for this feature is still evolving.

As of this writing, the hyphens property is supported in Internet Explorer 10, Firefox 6+, and Safari 5.1+ with a prefix. Chrome, surprisingly, has yet to implement it.

See demo

Usage

The hyphens property can take two values: auto and manual. With auto, the browser will hyphenate paragraphs automatically where appropriate.

p {
  text-align: justify;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
}

This approach yields the following effect.

Automatic Hyphenation Example

Choosing manual means content creators must manually indicate where words should break by inserting the ­ (Soft Hyphen) within the word.

HTML

<p>Lorem ipsum dolor sit amet, consect­etur adipisic­ing elit, sed do eius­mod tempor incididunt ut labore et dolore magna ali­qua [...]</p>

CSS

p {
  text-align: justify;
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  hyphens: manual;
}

The outcome can vary based on paragraph length.

Hyphenation Comparison

Conclusions

Should this feature gain universal browser support, web paragraphs would significantly benefit from improved display. In the meantime, a JavaScript library like Hyphenator offers a viable alternative with broader compatibility and multilingual support.

See demo Download source

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail