What are the best practices for dealing with desired line breaks in responsive web design?

Question

I design a great deal of simple single page web items for sales or email. I often find I run into issues with headlines and my desired line breaks at different media widths. For example, I could have a headline such as:>**Our New thingamabob is the best thing since sliced bread!**With absolutely no attention to line breaks the line breaks like this:>**Our New thingamabob is the best thing since <br />sliced bread!**At full web size, I'd like to break the line after "the". Creating two lines. >**Our New thingamabob is the <br />best thing since sliced bread!**For a screen with a medium width, I'd break twice:>**Our New thingamabob <br />is the best thing<br /> since sliced bread!**For even narrower screens, I'd break after "new", after "thingamabob", and after "thing". Creating four lines. >**Our New <br />thingamabob <br />is the best thing <br />since sliced bread!**I *really* don't want to use break tags (``) because that hard-sets the breaks at all sizes. Up until now I've used media queries and width percentages for the various `h1`-`h5` tags so that the width of the tag forces a break. But this seems "hacky" to me (it is also *very* temperamental at times based upon the actual text).What's the best way to control line breaks without hard coding them into the html?

Answer 1

This is a very common problem, not just for your use case but also when displaying long URLs that will overflow your containers. Here are my possible solutions, from easiest to most complex:

1)

The simplest solution is to use wbr tags: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/wbr. These are optional word breaks in HTML.

<h1>Our New thingamabob <wbr />is the best thing <wbr />since sliced bread!</h1>

2)

I've also tried to tackle this problem with spans, although its being unsemantic feels a bit icky. Wrap your lines of text in spans then control the white-space property in CSS. Use white-space: nowrap; on the spans themselves. Each span will stay intact and line breaks will only happen between them.

<h1><span>Our New thingamabob</span> <span>is the best thing</span> <span>since sliced bread!</span></h1>

h1 span {

white-space: nowrap;

}

3)

If you want to play with a responsive font size, you can use viewport units.

h1 {

font-size: 36pt; /* preferred font size */

}

@media screen and (max-width: 600px) {

h1 {

font-size: 2vw; /* font-size will be 2% of viewport width (responsive) */

}

}

I hope this helps!

Ian