W3docs
en
Log in

How to Prevent Long Words from Breaking a Div

In this snippet, we are going to present some methods that you can use to prevent long words from breaking a <div> element. For that, use HTML and CSS.

Tags

Solutions with HTML and CSS

In this snippet, we’ll present some methods that you can use to prevent long words from breaking a <div> element. This is possible to do with pure HTML, but you can also use CSS.

You can instruct the browser where to split long words by using a soft hyphen (­).

Example of preventing long words from breaking with a soft hyphen:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>
      This is an example.This is some example with veryyyyyyyyyyyyyyyyyyyyyyyy&shy;Longword.
    </div>
    <div>
      CSS is a rule-based language, which means that you define rules specifying groups of styles applying to specified elements or groups of elements on the web page. CSS Selectors are part of a CSS rule set used for selecting the content you want to style.
    </div>
  </body>
</html>
Try it Yourself »

Result

<div class="demo px-2.5 mx-2.5 mt-1 mb-5 not-prose"> <div>This is an example. This is some example with veryyyyyyyyyyyyyyyyyyyyyyyy­Longword.</div> </div>

Another way of preventing a long word from breaking a <div> is using the HTML <wbr> tag. This will break the word without any hyphen.

Example of preventing long words from breaking with the HTML <wbr> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>
      This is an example.This is some example with veryyyyyyyyyyyyyyyyyyyyyyyy<wbr />longword.
    </div>
    <div>
      CSS is a rule-based language, which means that you define rules specifying groups of styles applying to specified elements or groups of elements on the web page. CSS Selectors are part of a CSS rule set used for selecting the content you want to style.
    </div>
  </body>
</html>
Try it Yourself »

You will have the same effect if you use one of these characters: ​ or &#x200B. Let’s see examples with them as well.

Example of preventing long words from breaking with the ​ character:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>
      This is an example. This is some example with veryyyyyyyyyyyyyyyyyyyyyyyy&#8203;Longword.
    </div>
    <div>
      CSS is a rule-based language, which means that you define rules specifying groups of styles applying to specified elements or groups of elements on the web page. CSS Selectors are part of a CSS rule set used for selecting the content you want to style.
    </div>
  </body>
</html>
Try it Yourself »

Example of preventing long words from breaking with the &#x200B character:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <div>
      This is an example. This is some example with veryyyyyyyyyyyyyyyyyyyyyyyy&#x200B;Longword.
    </div>
    <div>
      CSS is a rule-based language, which means that you define rules specifying groups of styles applying to specified elements or groups of elements on the web page. CSS Selectors are part of a CSS rule set used for selecting the content you want to style.
    </div>
  </body>
</html>
Try it Yourself »

Another method is using the CSS hyphens property. Set it to auto on the <div> element. Note that hyphenation relies on a language dictionary, so you must set the lang attribute on the element for it to work correctly in most browsers.

Info

Hyphenation is based on a language dictionary, so it's not guaranteed to break every long word.

Example of preventing long words from breaking with the CSS hyphens property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        hyphens: auto;
      }
    </style>
  </head>
  <body>
    <div lang="en">
      This is an example. This is some example with veryyyyyyyyyyyyyyyyyyyyyyyyLongword.
    </div>
    <div>
      CSS is a rule-based language, which means that you define rules specifying groups of styles applying to specified elements or groups of elements on the web page. CSS Selectors are part of a CSS rule set used for selecting the content you want to style.
    </div>
  </body>
</html>
Try it Yourself »

The modern standard for this task is the CSS overflow-wrap property with the anywhere value. It allows the browser to break a word at any point if necessary to prevent overflow.

Example of preventing long words from breaking with the CSS overflow-wrap property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        overflow-wrap: anywhere;
      }
    </style>
  </head>
  <body>
    <div>
      This is an example. This is some example with veryyyyyyyyyyyyyyyyyyyyyyyyLongword.
    </div>
  </body>
</html>
Try it Yourself »