by Tyler Sticka published on Dec 15, 2025
On the web, it’s easy to take line breaks for granted.
We get them for free between our headings, paragraphs, list items, <div> elements and more. We display them as-is in our code snippets thanks to <pre>. And most magically of all, our browsers insert breaks automatically where lines of text (or other text-like “inline” elements) would otherwise outgrow their container.
But sometimes, that isn’t enough.
Some words are too long and continuous to break automatically. Some words can be “orphaned” onto their own, lonely line. Occasionally, our content demands an overt break; more often, our designs call for their addition or removal.
So it makes sense that HTML provides a …
by Tyler Sticka published on Dec 15, 2025
On the web, it’s easy to take line breaks for granted.
We get them for free between our headings, paragraphs, list items, <div> elements and more. We display them as-is in our code snippets thanks to <pre>. And most magically of all, our browsers insert breaks automatically where lines of text (or other text-like “inline” elements) would otherwise outgrow their container.
But sometimes, that isn’t enough.
Some words are too long and continuous to break automatically. Some words can be “orphaned” onto their own, lonely line. Occasionally, our content demands an overt break; more often, our designs call for their addition or removal.
So it makes sense that HTML provides a few options for managing mid-content breaks. Some famously overused, others less known or understood:
- The “break” element,
<br> - The “word break opportunity” element,
<wbr> - The “soft hyphen” character,
­ - The “non-breaking space” character,
Let’s “break” down (nyuk, nyuk) those techniques: What they do, when they’re appropriate, and alternatives to consider.
The “break” element, <br>
99% of the time, line breaks in text that are truly meaningful to your content will justify a new paragraph, list item, <div> or other block element.
The <br> (“break”) element is for those rare exceptions.
For example, a <br> can force a break between lines of poetry or song (apologies to Linkin Park):
<p> Everything you say to me<br> (Takes me one step closer to the edge)<br> (And I’m about to break)</p>
Or within an address:
<address> Breakside Brewery<br> 1570 NW 22nd Ave.<br> Portland, Oregon 97210</address>
And… that’s pretty much it. As commonplace as <br> is, it’s rarely preferable to more semantic HTML.
The “word break opportunity” element, <wbr>
The <wbr> element is <br>’s less famous, more introverted cousin. It inserts a break only when the text will overflow and the browser can’t find a “break opportunity” (whitespace) of its own.
You wouldn’t want to use <wbr> for most text: There’s no hyphenation or anything to indicate where breaks occur. But it can be useful when a string has predictable breakpoints that aren’t spaces.
For example, the slashes in a URL or directory path:
https://htmhell.dev<wbr>/adventcalendar<wbr>/2025<wbr>/17<wbr>/index.html
Or dot notation in an object chain:
namespace<wbr>.class<wbr>.object<wbr>.property
<wbr> should only be used to signify clear break points: You should not attempt to auto-insert <wbr> elements willy-nilly as a form of general overflow avoidance. It is also a poor choice for any list-like content, such as breadcrumb navigation.
The “soft hyphen” character, ­
The ­(“soft hyphen”) character reference (­ for the Unicode stans) functions a lot like <wbr>, except a hyphen is inserted just before the break:
anti­dis­establishmen­taria­nism
­ is also surprisingly configurable via CSS. You can replace the hyphens with a character of your choice:
p { hyphenate-character: "⋯";}
Or disable them entirely:
p { hyphens: none;}
The hyphenation makes ­ more suitable for typical prose than <wbr>. That said, hyphenation in general is a bit of a minefield:
- It doesn’t work well in every language.
- Breaking up a word between two lines, hyphenated or not, can be challenging for many readers.
- While hyphenation has a long and rich typographic history, its readability has always been highly dependent on the size, layout and justification of the overall text. Dynamic content and responsive containers make it that much tougher to get right.
I occasionally find ­ helpful when I’m writing and notice a word flowing in a particularly troublesome way. I’d consider frequent usage a signal to simplify my verbiage or tweak my design.
The “non-breaking space” character,
Normally, whitespace characters are the most reliable indication of a line break opportunity. The character openly defies that convention, applying a space that is, much like Kimmy Schmidt, unbreakable:
Keep it together
(The non-breaking space is just one of many whitespace characters that will prevent a string from breaking as you’d normally expect.)
As useful as that sounds, and its cousins should be considered a last resort. They don’t play very well with other techniques for managing breaking and text flow, and they’re virtually impossible to style without additional selectors or truly epic hacks.
Gently Apply Your Breaks
If you’ve followed along to this point, you may notice a pattern: These techniques all have pretty limited use cases!
<br>for the rare break that’s actually part of the content (poems, addresses, etc.)<wbr>for weird run-on strings­for very occasional hyphenation in prose when you must avoid a break at all cost
For other mid-content break scenarios, your best bet is CSS!
With display, we can stack inline elements as if they were blocks:
<p style="display: grid;"> <span>Ms. Boop Squanklin,</span> <span>Beloved Activist & Icon</span></p>
Or flow block elements together:
<hgroup style="display: flex; flex-wrap: wrap; column-gap: 1ch;"> <h1>Heading</h1> <p>Subtitle</p></hgroup>
Or keep key phrases wrapping as one:
<p> “Come Together” by <span style="display: inline-block;"> The Beatles </span></p>
We can encourage long strings to wrap more aggressively with overflow-wrap:
p { overflow-wrap: anywhere; /* or */ overflow-wrap: break-word; /* or */ word-break: break-all;}
Rescue typographic orphans with text-wrap:
p { text-wrap: balance; /* or */ text-wrap: pretty;}
Or micro-manage break behavior with white-space:
.yolo-single-line { white-space: nowrap;}
(We can even apply hyphenation and truncation via CSS, but these present their own challenges. See my justified text explorations and some classic truncation wisdom from Karen McGrane.)
Content that calls for a semantic break is rare, but real: It’s good to understand your HTML options for that scenario. But once you’ve plopped in one quick <br>, its immediacy makes it tempting to overuse.
Resist the urge, write good markup, and embrace the accessibility, power and maintainability of CSS alternatives. Your audience and your project’s future maintainers will be happy you did!
About Tyler Sticka
Tyler Sticka is a creative director, designer, writer and artist from Portland, Oregon. He works with organizations to create and ship expressive, powerful and performant web applications and experiences. He co-owns Cloud Four, a tight-knit web design and development consultancy with an outsized impact. The browser is his favorite design tool, and he loves to draw.
Tyler’s homepage and blog: tylersticka.com Tyler’s company, Cloud Four: cloudfour.com Follow Tyler on Mastodon: @tylersticka@social.lol