AtoZ CSS Quick Tip: Using Widows and Line Breaks

Share this article

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 &nbsp; 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

What is the difference between widows and orphans in CSS?

In CSS, widows and orphans refer to the lines at the beginning or end of a paragraph that are left dangling at the top or bottom of a column, separated from the rest of the paragraph. The term ‘widow’ describes a paragraph-ending line that falls at the beginning of the following page or column, thus separated from the rest of the text. ‘Orphan’ refers to a paragraph-opening line that appears by itself at the bottom of a page or column.

How can I control widows and orphans in CSS?

CSS provides properties named ‘widows’ and ‘orphans’ to control the minimum number of lines in a paragraph that can be left at the top or bottom of a page. By default, their values are set to 2, meaning at least two lines of a paragraph will be left at the top or bottom of a page. You can adjust these values according to your needs.

What is the ‘line-break’ property in CSS?

The ‘line-break’ property in CSS specifies how to break lines of Chinese, Japanese, or Korean (CJK) text. It can take values like ‘auto’, ‘loose’, ‘normal’, or ‘strict’. Each value determines how the line will be broken in different circumstances, providing control over the layout and readability of CJK text.

How does the ‘line-break’ property affect non-CJK text?

The ‘line-break’ property has no effect on non-CJK text. For non-CJK text, line breaking is controlled by the ‘white-space’ property and the ‘word-break’ property.

Can I use the ‘widows’ and ‘orphans’ properties for web pages?

While the ‘widows’ and ‘orphans’ properties are part of the CSS specifications, they are originally intended for paged media like print. As of now, only a few browsers support these properties for web pages. Therefore, their usage for web layouts is limited and not widely recommended.

What are some alternatives to control widows in web layouts?

There are several techniques to control widows in web layouts. One common method is to use a non-breaking space ( ) between the last two words of a paragraph. This ensures that the last two words will stick together and won’t be separated. Another method is to use JavaScript or jQuery to dynamically prevent widows.

How can I prevent line breaks in CSS?

You can prevent line breaks in CSS by using the ‘white-space’ property with the ‘nowrap’ value. This will prevent the text from wrapping to the next line, forcing it to stay on a single line.

Can I force a line break in CSS?

Yes, you can force a line break in CSS by using the ‘
‘ HTML element or by using the ‘content’ property with the ‘\A’ value in the ‘after’ or ‘before’ pseudo-element.

How does the ‘line-break’ property affect the layout of CJK text?

The ‘line-break’ property can significantly affect the layout and readability of CJK text. For example, the ‘strict’ value can prevent certain characters from appearing at the end or beginning of a line, which can make the text easier to read. However, it can also lead to more uneven line lengths.

What is the default value of the ‘line-break’ property?

The default value of the ‘line-break’ property is ‘auto’. This means the browser will determine the line breaking rules based on its default line breaking rules, which can vary between different browsers.

Guy RoutledgeGuy Routledge
View Author

Front-end dev and teacher at The General Assembly London. A to Z CSS Screencaster, Founder of sapling.digital and Co-founder of The Food Rush.

aleczandergAtoZ CSSlearn-advanced-css
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form