Responsive line breaks

The problem #

Designers don't like responsive text because it can make for ugly line wraps. We do have some control over it though. Here's how to have a line break at a certain breakpoints.

Here's our title code:

<h3>I am a very long title, and this bit should wrap on small screens</h3>

A solution using a br #

We can add a line break.

<h3>I am a very long title,<br>and this bit should wrap on small screens</h3>

And then use CSS to hide the <br> at certain screen sizes.

h3 br {
  display: none;
}

@media screen and (min-width: 600px) {
  h3 br {
    display: block;
  }
}

A solution using a span #

<h3>I am a very long title,<span>and this bit should wrap on small screens</span></h3>

h3 span {
  display: block;
}

@media screen and (min-width: 600px) {
  h3 span {
    display: inline;
  }
}