Responsive Line Breaks in CSS

Written by Michael Lee 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, side projects and working remotely. Sign up and I'll send you my articles straight to your email.

:wave: Hey hey, I'm Michael Lee! I really appreciate you taking the time to read this article.

Be sure to check out my other articles.