When <br> is not enough – A tour of 11 HTML and CSS line break examples
Tags: webdev, css, html
Published: 2022-05-27 17:26:29

The other day I was making copy changes and needed to add a line break to a CTA. When I reached for the trusty line break element `<br>`, I got a PTSD flashback of early 2000's web development – when `<br>` was frequently used to add vertical spacing. This got me thinking:


When is it wrong to used `<br>` and should I be using `<p>` or `<pre>` instead?

Should I use CSS to style line breaks instead of HTML elements? If so, how should I do it?

In this post, I'll go over various HTML and CSS-based methods for creating line breaks in your text, as well as methods for breaking up words to achieve the right typeset. I'll use the first stanza of Walt Whitman's 1865 poem 'O Captain! My Captain!' to demo each method.

## HTML Line Break

{% codepen https://codepen.io/shimin-zhang/pen/jOZYmgW %}

_Example 1:_ By default, browsers collapse all HTML whitespace characters into a single space character, removing all line breaks from the content. This is obviously an inappropriate choice. It strips away all rhythm from the poem.

_Example 2:_ You may be tempted to break each line of the poem into its own paragraph element. This creates hard line breaks, but removes element semantics – a paragraph should be an entire stanza containing multiple lines. It also introduces unnecessary margins and padding between lines.

_Example 3:_ This is the canonical use-case of a line break element `<br>` – to break up a line without introducing additional semantics. However, looking at the text of the poem we see that lines 5-8 contain indentations that are now stripped from the output.  

_Example 4:_ The preformatted element `<pre>` preserves both line breaks and additional white space characters from the HTML. But the `<pre>` element faithfully preserves all formats and does not allow for text-wrap. This causes overflow for our text, making it better suited for ASCII art and code blocks.

We've reached the limit of what HTML-only line-breaks can do for us, let's take a look at some CSS options.

## CSS Line Break
{% codepen https://codepen.io/shimin-zhang/pen/ZErvyQK %}

_Examples 5 & 6:_ The `white-space` [CSS property](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) is the main corresponding CSS method for controlling line breaks. Interestingly, there is a CSS [line-break](https://developer.mozilla.org/en-US/docs/Web/CSS/line-break) attribute, but it only deals with how punctuations behave with line-break for East Asian languages.

The `white-space` property's `normal` and `pre` values correspond to the default `<p>` tag and `<pre>` tag behavior, respectively.

_Example 7:_ Things start to get interesting when we move on to `white-space: pre-line`, where whitespace characters are still collapsed but newline characters now create new lines. Note the indentation from lines 5-8 are still lost, it's as if all new line characters are now treated like `<br>`.

_Example 8:_ The `white-space` value `pre-wrap` acts like the `<pre>` element, but also creates new lines so our text does not bleed outside of the parent container. This is the best CSS line break solution we have so far for our Whitman poem use case.

`white-space` has two more potential values. `nowrap` disables line breaks and collapses whitespace, and `break-spaces` that behaves like `pre-wrap` but treats end-of-line spaces without hanging.

So far, we've looked at solutions that break lines up using whitespace or newline character. What if we want to break a line up in the middle of a word?

## Word Break
{% codepen https://codepen.io/shimin-zhang/pen/oNEpwYa %}

_Example 9:_ The canonical HTML solution for dealing with word-break is the line break opportunity element `<wbr>` and its cousin the soft-hyphen `­&shy;`. They both indicates to the browser that the location is a preferred location for word-break, but only if the browser deemed a word-break necessary.  
_Example 10:_ Instead of manually finding all word-break opportunities in your copy, you can use the CSS property `word-break` with the value `break-all` to let the browser choose when a word should be broken to form a new line. This is akin to automatically inserting `<wbr>` after every character.

_Example 11: La_stly, the CSS property `hyphens` with the value `auto` can be used to generate browser-determined hyphens for word-break. This is as if we added `&shy;` to every non-whitespace character in our text. In my opinion, this option gives us our best poem typeset yet, I especially like how fearful's broken into 'fear-ful' and flows naturally from one line to the next. `hyphens: manual` uses the soft hyphen character to insert line breaks instead.

## Final Word

There you have it, 11 examples of adding line breaks to your text!

Here are some rules of thumb:

-   In general, use CSS line breaks options over their HTML equivalent – separation of concerns between style and content.
-   The exception to the above rule is when the line break is semantic, such as adding `<br>` tags to indicate typographic line breaks.
-   Another exception is the usage of `&shy;` choice of hyphen location is a semantic property of text.

If you found this post helpful, please share it with others. You may also be interested in learning [if it's acceptable to use multiple H1 elements in 2022](https://blog.shimin.io/should-you-use-multiple-h1-s-in-2022/) or [when you should use the px unit for styling](https://blog.shimin.io/three-questions-to-ask-when-using-css-px/).