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
See the Pen Line Break 1 by Shimin Zhang (@shimin-zhang) on CodePen.
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
See the Pen Line Break 2 by Shimin Zhang (@shimin-zhang) on CodePen.
Examples 5 & 6: The white-space CSS property is the main corresponding CSS method for controlling line breaks. Interestingly, there is a 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
See the Pen Line Break 3 by Shimin Zhang (@shimin-zhang) on CodePen.
Example 9: The canonical HTML solution for dealing with word-break is the line break opportunity element <wbr> and its cousin the soft-hyphen ­. 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: Lastly, 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 ­ 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
­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 or when you should use the px unit for styling. You can also subscribe to email updates using the form below.