Where Lines Break is Complicated. Here’s all the Related CSS and HTML.

Say you have a really long word within some text inside an element that isn't wide enough to hold it. A common cause of that is a long URL finding it's way into copy. What happens? It depends on the CSS. How that CSS is controlling the layout and what the CSS is telling the text to do.

This is what a break-out text situation might be like:

The text hanging out of the box is a visual problem.

One possibility is overflow: hidden; which is a bit of a blunt force weapon that will stop the text (or anything else) from hanging out. Yet, it renders the text a bit inaccessible. In some desktop browsers with a mouse, you might be able to triple-click the line to select the URL and copy it, but you can't count on everyone knowing that or that it's possible in all scenarios.

Overflow is the right word here as well, as that's exactly what is happening. We have overflow: auto; at our disposal as well, which would trigger a horizontal scrollbar. Maybe suitable sometimes, but I imagine we'll all agree that's not generally an acceptable solution.

What we want is the dang long URL (or text of any kind) to break to the next line. There are options! Let's start with a place to attempt figure this stuff out.

Experimental Playground

My idea here is to have a resizeable panel of content combined with a variety of CSS property/values that you can toggle on and off to see the effects on the content.

This isn't comprehensive or perfectly executed, I'm sure. It's just some of the properties I'm aware of.

The Sledgehammer: `word-break: break-all;`

Allows words to be broken anywhere. The word-break property does "solve" the issue:

p {
word-break: break-all;
}

In an email exchange with fantasi, she explained that this works because the word-break property redefines what a word is. The break-all value essentially treats non-CJK as CJK, which can break just about anywhere (except stuff like periods and close parenthesis). The keep-all value does the reverse, treating CJK as non-CJK.

A Subtle Fix: `overflow-wrap: break-word;`

The overflow-wrap property seems to be the most effective solution for the problems we've laid out:

At first glance it might look very similar to the word-break: break-all; demo above, but notice how in the URL rather than breaking "pen" at "pe\n", it breaks at the end of that word where the slash is. Nicer.

fantasai explained:

"If a word can't break and would therefore overflow, then it can break anywhere to avoid overflow."

A Heavier Fix, Sometimes: `hyphens: auto;`

The hyphens property does what you might expect...allows for hyphenation in line breaks. Hyphens can sometimes do the trick in URLs and long words, but it's not guaranteed. A long number would trip it up, for example. Plus, hyphens affect all the text, breaking words more liberally to help text hug that right edge evenly.

p {
hyphens: auto;
}

fantasai told me:

"If a 'word' straddles the end of the line, we can hyphenate it."

I guess "word" helps put a finger on the issue there. Some problematically long strings aren't "words" so it can't be counted on to solve all overflow issues.

Future Sledgehammer: `line-break: anywhere;`

There is a property called line-break. It's mostly for punctuation, apparently, but I can't seem to see it working in any browser. fantasai tells me there will be a new value called anywhere which is:

Other HTML Stuff

The <br> element will break a line wherever it renders. Unless it's display: none;!

The <wbr> element is a "word break opportunity" meaning a long word that would normally cause an annoying overflow issue could be told that it's ok to break at a certain point. Useful! It behaves like a zero-width space.

Other CSS Stuff

The &shy; character is just like the <wbr> element.

You can inject a line break via pseudo element like ::before { content: "\A"; } as long as elment isn't inline (or if it is, it needs white-space: pre;)

Hi Chris! Thank you very much for your post. I’d be very grateful if you can give me a hand with something I desperately need to solve. I’m trying to figure out how can I set in a rule in order to only allow words at least six-letters long to be hyphenate. The reason why I don’t use hyphens:auto is because, as you know, if you hyphenate short words the text might end being rather difficult to read. Using the hyphenate-limit-chars property, you can limit the word length and the number of characters before and after a hyphen. Have you ever used it? I would really appreciate any further information you can provide me with, regarding this CSS property.

Nice article. Sometimes it works with pure CSS or some HTML. These are the more hardcoded way to go.
Some years ago I adopted a quite complicated hyphenation engine written in JavaScript. When it gets more complicated I like to use this webplugin (https://github.com/marcwieland95/hypher-for-jQuery).

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.