AtoZ CSS Quick Tip: Using Widows and Line Breaks

This article is a part of our AtoZ CSS Series. You can find other entries to the series here. Welcome to our next article as part of our AtoZ CSS series! In this series I’ll be exploring different CSS values (and properties) each beginning with a different letter of the alphabet. We know that sometimes screencasts are just not enough, in this article I’ve added a new quick tip/lesson about utilizing line breaks and avoiding widows for you.

W is for Widows and Line Breaks

A widow is a term used to describe a lone word at the end of a paragraph or headline.

These lone words occur when the last word in a line of text wraps on to a new line due to a lack of available width.

It’s more visually pleasing to have at least two words on a line and these widows are often seen as undesirable. An agency that I used to work at was so pedantic about them that I’ve become slightly OCD about ensuring they are nowhere to be seen – not so much in paragraphs of text but certainly in headings as far as possible.

Here are some tips for removing widows and working with line breaks.

Avoid using <br> tags to force line breaks.

We can force a line break and ensure text wraps in a pleasing way by adding a break tag into the HTML document.

<h1>
  This is a long title which should<br>
  wrap here
</h1>

This might look fine on a wide screen device but if the screen is narrow, the line break may come at the wrong point, leaving the text looking broken. For example:

This is a long title which
should
wrap here

This could happen if the available width would only fit the string "This is a long title which". The word “should” would then wrap naturally and then the forced <br> would cause “wrap here” to be on its own line.

Not very nice.

Don’t use <br> tags for spacing

This is something I see very new students doing a lot. They’ve just learned HTML and want to start spacing things out from each other; more spacing above headings, more spacing between sections or paragraphs etc.

This can be done with <br> tags by manually adding empty lines but spacing should always be handled by CSS. The margin property gives you much more control than adding line breaks with <br> tags and HTML is for content, not for styling.

When can I use <br> tags?

Generally speaking, I try and avoid using <br> tags as much as possible.

Really the only times I do use line breaks is when marking up poetry (although <pre> tags would probably be more preferable here to preserve all line breaks and indentations). The other place is when marking up mailing addresses.

I’ve also been known to use them in a paragraph in a website footer for a quick and dirty approach to adding copyright info.

<footer class="site-footer">
  <p>
    Lovingly created by Guy Routledge<br>
    &copy; 2016 All Rights Reserved
  </p>
</footer>

Does this break my rule about not using line breaks for styling? Perhaps. I’ll tell myself off.

Hide line breaks with display:none

A <br> tag doesn’t do a huge amount (other than force a line break) and doesn’t have any visual characteristics – you can’t see them, they don’t have any shape or size or colour or anything like that.

However, you can add a class to one and toggle it’s ability to break lines with the display property.

Setting display:none will not cause a line break. Setting display:block will cause a line break. This can occasionally be useful when combined with media queries to turn breaking on and off at certain screen sizes.

<p>
  Lovingly created by Guy Routledge

  <br class="break-large">

  &copy; 2016 All Rights Reserved
</p>

.break-large {
  display: none;
}
@media screen and (min-width: 1000px) {
  .break-large {
    display: block;
  }
}

These snippets will allow the text to flow as a single line on narrow screen devices but for large screens, the break will be visible and the copyright text will be on two lines.

Use   for flexibly removing widows

Circling back to where we started this post, if we shouldn’t use <br> tags to force line breaks (and remove ugly widow words) then what should we use?

Well joining the last two words in a heading with a non-breaking space character is a much more flexible way of ensuring text flows and wraps in a visually pleasing way. Take the following markup:

<h1>
  This is a long title which wraps&nbsp;here
</h1>

I’ve added a non-breaking space between the words “wraps” and “here” which makes them behave as if they are a single word, rather than two that are separated by a space.

If the screen is wide and there’s enough space for the whole heading to display in a single line, everything looks fine.

If the screen width is reduced, the first available wrap point is between the string “which” and the string “wraps here”. This means that if there isn’t enough space for the whole heading to fit on a single line, the line will break on to two lines, leaving the last two words on their own. No widows and everything looks great.

If you want to see this technique in action, you can use your browser’s developer tools to inspect the headings on this page. You could also try resizing the window to see how the words in each heading break.

Frequently Asked Questions about CSS Widows and Line Breaks