Get "PHP 8 in a Nuthshell" (Soon includes PHP 8.4)
Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

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 &shy; entity

The &shy; 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 &shy; entity like so.

<p>super&shy;califragilistic&shy;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 &shy; 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.

Comments?