X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

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 break-all, the browser will break lines at any point.

The word-break 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

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

An example where the words break in the text:

Example

<!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 Word is broken to any character to avoid overflowing.
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 Word is broken to any at arbitrary points to avoid overflowing.
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