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.
👋 Hi there! This is Amit, again. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!
