Two ways to safely break a long word in HTML
In HTML, if you have a long word that doesn’t fit into the container, it will overflow the container and will break the layout. So, to avoid this, there are two ways to safely break a long word in HTML.
Using the <wbr> tag
The <wbr> tag stands for “word break opportunity” and it’s a non-semantic tag that tells the browser to break the word at the specified point. So, if you have a long word like supercalifragilisticexpialidocious and you want to break it at a certain character based on the width of the viewport, you can do this by using the <wbr> tag like so.
<p>super<wbr>califragilistic<wbr>expialidocious</p>
This will intelligently break the word at the r and c characters where it might overflow the container. So, the browser will break the word and will render it like so.
See the Pen Breaking word with <wbr> by Amit Merchant (@amit_merchant) on CodePen.
Notice that the word will be broken only where it’s needed and not at every place where <wbr> is used which is pretty great!
Using the ­ entity
The ­ entity is a non-breaking hyphen that tells the browser to break the word at the specified point. So, if you have a long word like supercalifragilisticexpialidocious and you want to break it at a certain character with a hyphen, you can do this by using the ­ entity like so.
<p>super­califragilistic­expialidocious</p>
This will intelligently break the word at the r and c characters where it might overflow the container. So, the browser will break the word with a hyphen (-) and will render it like so.
See the Pen Breaking word with <wbr> by Amit Merchant (@amit_merchant) on CodePen.
As you can see, the word is broken with a hyphen (-) based on the character where the ­ entity is used and it also breaks it only where it’s needed.
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
