How to Prevent Long Words from Breaking a Div

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 (&shy;).

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

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>

Result

This is an example.This is some example with veryyyyyyyyyyyyyyyyyyyyyyyy­Longword.

Another way of preventing a long word 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>

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

Example of preventing long words from breaking with the &#8203; 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>

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>

Another method that works in Firefox and Safari is using the CSS hyphens property. Set this property to "auto" on the <div> element.

Note that in this case, hyphenation works based on a hyphenation dictionary. Therefore it's not guaranteed to break long words.

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>
      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>

The last method that we’re going to show in this snippet is using the CSS display property with its "table-cell" value on the <div>.

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

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        display: table-cell;
      }
    </style>
  </head>
  <body>
    <div>
      This is an example. This is some example with veryyyyyyyyyyyyyyyyyyyyyyyyLongword.
    </div>
  </body>
</html>