Force breaking very long words in HTML when reaching the end of the line

DanielMarch 13, 2023

There is an HTML <wbr> element that lets the browser know when to add a line break for very long words.

A very long word, such as microminiaturization, can be problematic when it comes to fitting a line of text in a narrow container.

That’s where the element comes in. We can tell the browser to break that word at a specific spot if it needs to. Actually, wbr comes from word-break-opportunity.

And yes, microminiaturization is a real word.

Check out this code:

<div>
  <p>Microminiaturization</p>
  <p>Micro<wbr>miniaturization</p>
</div>

It will result in this output:

All the browsers support the wbr element, and here is the link for the codepen.