Controlling line breaks for headings - CSS Tutorial

Headlines can be an especially sticky point in typography for responsive design. The designer in us wants exact pixel perfect control over where these important line breaks happen and when, but responsive design is more about giving that kind of detail control. And that can be really tough to deal with. In this tutorial, we'll look at a technique you can use to control the line breaks of an important heading with a little bit of markup and some media queries A word of warning, though. This is something to use sparingly and only when necessary .If you did this for every single headline on your site, you would drive yourself crazy. But it's a good trick to use in those few cases when you really do need to be a little extra picky. To demonstrate this, we'll use our headline in isolation, like you see here. We've also changed it a bit to be set all in one font and all in the same container. As we take a look at our headline at various viewport widths you'll notice that the line breaks pretty much arbitrarily, basically however its actually going to fit within the viewport. That's normal, and generally what we have to expect in responsive design. Sometimes, the second line is only one word long, and sometimes it'll break in a logical place, but sometimes it won't. The typographer in us is definitely annoyed by this lack of control. Luckily, we can gain just a little more control over this when it's absolutely necessary, using some span tags. Let's head to Coda and look at our HTML and put some spans where our line breaks might seem the most logical. So look at our index.html page, and this is our headline right here. The most logical way for this particular headline to break is to actually have, The Breakfast Drama, on one line and then, That Rocked the World, as the second line. So let's add spans around each of those lines. Now we have our span tags indicating what should be the first and second line in the case when this headline needs to break into two lines. And lets give each of them a class, so we can target them in our CSS. We'll give them each a class, a responsive design line or RDW line. And we'll add this to our second span as well. If we save our HTML and preview this in our browser now, absolutely nothing has changed because by default our span elements are inline elements and we've done nothing to change that, but now that we have these hooks in place, we can add some additional CSS to force a line break where we want it. So let's head back to Coda and look at our CSS. First, we'll add a rule to to have these RWD line spans display as block elements by default. And we'll add these here right under our h1 since that's where those spans are. So we'll add a rule for the RWD line class, and set that to display block. Previewing this now, we'll see that it works. And by making those spans block, we have forced the line break to happen right were we want it to. This works pretty well at medium-sized viewports and even I guess really large ones but it does break down a bit at smaller view port width. So we have to do just a little bit more than this. I'd like to have the headline all on one line when it fits in larger widths and we should remove our forced line break when the viewport is so narrow that the headline needs to split into more than two lines. So lets add media queries to handle those cases. It looks like our title had the space to display all in one line at viewport widths greater than 1,000 pixels, so let's set a media query to display our spans inline above that size. And now we'll add a rule for our RWD line spans. And not at viewport widths at 1,000 pixels or higher, we will overwrite that display block with a display inline. We want to check that this works we can save it and go back to our browser, refresh our page and you can see we are over 1,000 pixels in viewport width and now our headline is all on one line and if we go below 1,000 we'll see it breaks where we want it to. Now we just need to add a media query to take of removing our line break on narrower viewport widths. So back to our CSS we'll add one more media query. It looked like our headlines started breaking into more than two lines around 500 pixels in width, so we'll use that as a setting for our next media query. And we'll make this media query a max width media query, because we only want it to take place below and at 500 pixels, not above. And here we'll add a rule for our class that sets our display to be inline again, which essentially renders our spans kind of invisible because they'll be inline just like the text was already inline and it will break wherever it needs to once the viewport is that narrow. Can save this and check back on our browser again just to verify that yes, now we're below 500 pixels and our forced line breaks are no longer there. And it's looking a little better when the headline needs to break into more than two lines. If you've been thinking ahead a little, you've probably realized that what we've done so far is really only part of the work. To use this technique in production, we'd need to test our line break related media queries on various devices in other browsers to make sure we were getting the line break where we wanted it. Subtle differences in browsers and how they render and display our type can affect line breaks like this. That's certainly far too much trouble to go through for every headline on your site, but it's a handy technique to keep in mind for special cases.