This CSS property helps you display text better in narrow spaces

Ever been in a situation where you have to display some paragraphs in a narrow block or column? You must have noticed a lot of white space to the right if you have long words that go into the next line.

Did you know you can fix this and make it look a lot better with just one line of CSS? Yes, here’s the magic rule:

hyphens: auto

This will automatically add hyphens to split long words, and you will end up with lesser whitespace.

See the difference? On the right, the words “disapprovingly”, “inside“ and “infomed“ have been split into two lines using hyphens.

You may not always want to use this. Depends on the situation, but nice to know right?

Codepen link for reference

📘 Complete Guide to CSS Flex and Grid

If you loved this write-up and how it was explained, you’ll absolutely love my eBook CSS Flex and Grid. Check it out!

📨 Newsletter suggestion

I love Tailwind CSS. If you love it too, I highly recommend subscribing to this one 👇

Tailwind Weekly: Weekly newsletter about all things Tailwind CSS. New issue every Saturday.