Use <wbr/> to break words

The browser breaks long text into multiple lines automatically, and most of the time it's enough. The default is to split on word boundaries.

But what if there are no word boundaries? This is the case for a long URL or snake_cased text. By default, the browser does not break the word, and it results in overflowed text:

Lorem_ipsum_dolor_sit_a|met_consectetur_adipiscing

Solution 1

The easiest solution is to use the overflow-wrap: break-word; CSS property that instructs the browser to break inside words too:

Lorem_ipsum_dolor_sit_a
met_consectetur_adipiscing

This solution prevents overflow, but the break points might not be the best ones.

Solution 2

If you have access to the HTML, you can add <wbr/> (word break opportunity) tags. As the name suggests, these introduce possible break points. This way, you have full control on where the breaks happen.

Lorem_ipsum_dolor_sit_
amet_consectetur_

Try it

• https://gist.run/?id=e01cb28ae02a6d4f3ed6170e26f43893

References

• https://developer.mozilla.org/en/docs/Web/HTML/Element/wbr