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


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
sliced bread!

At full web size, I'd like to break the line after "the". Creating two lines.

Our New thingamabob is the
best thing since sliced bread!

For a screen with a medium width, I'd break twice:

Our New thingamabob
is the best thing
since sliced bread!

For even narrower screens, I'd break after "new", after "thingamabob", and after "thing". Creating four lines.

Our New
is the best thing
since sliced bread!

I really don't want to use break tags (<br>) 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?

12/20/2014 6:16:00 PM

Accepted Answer

I'm only advising this on the basis that it's used for short snippets of text and not paragraphs.

The formatting of headlines can and should be controlled as much as possible within reasonable limits. JavaScript, or extra unnecessary elements are not quite "reasonable limits".

Non-Breaking Spaces on the other hand...               can be useful when used in moderation.
Placing them between the word pairs and triplets that you would like to keep together can produce the results you want.

However, you cannot use many consecutively, depending on the lengths of the words you're using, linking too many will force the text to overflow out of the viewport or its container.

Some quick experimentation on your own particular set of words should reveal the best words to link.

For the example in this question the HTML could look like:

<span>Our&nbsp;New thingamabob is&nbsp;the best&nbsp;thing since&nbsp;sliced&nbsp;bread!</span>

There is actually no CSS necessary here. The CSS in this example I've produced is just for fun.

In a nutshell, the key to this method is limiting the number of places where the text is allowed to break.

After re-reading the question, I realise I didn't quite satisfy the requirements. For this specific case, and on the assumption that there are other pages that require the same attention, I would define a single <br> for a full-width breakpoint. I would then reuse the same class on each of the pages at the most ideal place in the heading.

This <br> class would collapse at anything smaller than full-width acting as if it isn't even there, with the use of media queries. At viewport sizes less than full width, we rely on the &nbsp;'s alone.

Another example with a single <br> that's closer to the mark.


    Our&nbsp;New thingamabob is&nbsp;the<br class="full-width-breakpoint"/> best&nbsp;thing since&nbsp;sliced&nbsp;bread!

The CSS:

@media screen and (max-width:550px) {    /* Max Width depends on your design */     
    .full-width-breakpoint {             /* only experimentation or */
        display:none;                    /* calculation will reveal */
        line-height:0;                   /* the best max-width */
12/21/2014 1:05:00 PM