Controlling Hyphenation in CSS

Richard has done a nice writeup on hyphenation in CSS. Turns out we have some nice controls to tweaking how hyphenation on your site works:

There is more to setting hyphenation than just turning on the hyphens. The CSS Text Module Level 4 has introduced the same kind of hyphenation controls provided in layout software (eg. InDesign) and some word processors (including Word). These controls provide different ways to define how much hyphenation occurs through your text.

In the image above for example you can see hyphenate-limit-lines at work (on the right), which can limit the number of consecutive lines with hyphens.

All you need to know about hyphenation in CSS →

💁‍♂️ Looking to hyphenate Emoji? That might not always work as expected …

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.