Picture of Michael Lee
:wave: Hey hey, I'm Michael Lee and this is my site about being a developer, being a dad and making side projects.

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.

Thanks for taking the time to read this article. I'd love to stay in touch and share more tips on programming and design and side projects. Sign up and I'll send you my articles straight to your email.