Responsive Line Breaks in CSS

Written on September 23, 2014

One of the common design trends that you see these days are headers with a huge image and text overlayed on top of it. With responsive web design, there’s a challenge of breaking the text over several lines to make it look good, while having it look good over a multitude of resolutions.

This is a problem I ran into recently on a project. On desktop, I broke down a line with <br>s to make the layout look right. But on smaller screens, the lines just looked hideous. Looking around, I came across this Responsive Line Breaks solution by Daniel Mall.

It was simple to implement and if you’re into OOCSS, you can create a bunch of single-purpose classes at different breakpoints to finetune the layout.

Stay in touch

Thanks for reading this article. I'd love to stay in touch and share more tips on programming and side projects with you. Sign up and I'll send you my articles straight to your email, you'll also get a free copy of the light themed version of my Git cheat sheet.
Git cheat sheet preview image