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>

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>

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.

Browser support

44.0+ 12.0+ 15.0+ 9.0+ 31.0+

Practice Your Knowledge

Which statement is correct about word-breack property?



Do you find this helpful?

Related articles