CSS word-break Property

The word-break property specifies where the lines should be broken.

Normally, line breaks only occur in certain spaces when there is a space or a hyphen. But when the word-break property is set to the break-all value, the browser will break lines at any point.

This property is one of the CSS3 properties.

Initial Value	normal
Applies to	All elements.
Inherited	Yes.
Animatable	No.
Version	CSS3
DOM Syntax	object.style.wordBreak = "break-all";

Syntax

word-break: normal | break-all | keep-all | break-word | initial | inherit;

Example of the word-break property:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      html,
      body {
        height: 100%;
      }
      body {
        font-family: Helvetica, san serif;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #8ebf42;
      }
      p {
        word-break: break-all;
        line-height: 1;
        text-transform: uppercase;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
        color: #eee;
        width: 1em;
      }
    </style>
  </head>
  <body>
    <p>element</p>
  </body>
</html>

Try it Yourself »

Result

In the following example the words break in the text.

Example of the word-break property with the "break-all" value:

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      body {
        font-size: 0.95em;
        line-height: 1.5;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
      }
      .container {
        margin: 50px auto;
        max-width: 700px;
      }
      .text {
        padding: 20px;
        background-color: #666;
        color: white;
        text-align: justify;
      }
      .break {
        word-break: break-all;
      }
      strong {
        background-color: #000;
      }
    </style>
  </head>
  <body>
    <h2>Word-break property example</h2>
    <div class="container">
      <h3>Text breaks inside words</h3>
      <p class="text break">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem <strong>Ipsum</strong> has been the industry's standard dummy text ever since the 1500s, when an <strong>unknown</strong> printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, <strong>remaining</strong> essentially unchanged.
      </p>
    </div>
  </body>
</html>

Try it Yourself »

Values

Value	Description
normal	Uses line break rules. This is the default value of this property.
break-all	This value creates a break at the exact place where the text will otherwise overflow the container. It breaks the word at any character and as a result it will be difficult to read.
keep-all	Word breaks should not be used for Chinese/Japanese/Korean (CJK) text. Non-CJK text behavior is the same as for normal.
break-word	This value creates a break at the exact place where the text will otherwise overflow the container. It breaks the word at any character and as a result it will be difficult to read.
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.