CSS: The value “break-word” is deprecated

The word-break property controls how words break when they would overflow their container. While break-word was historically used as a value for this property, the CSS Text Module Level 3 specification has deprecated it. As the spec explains:

For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property.

Browsers still support word-break: break-word for backward compatibility, but relying on deprecated values is risky. Future browser versions may remove support, and validators will flag it as an issue. The correct approach is to use the overflow-wrap property instead, which is specifically designed to control whether and how words break when they overflow their container.

There are two modern alternatives to consider:

• overflow-wrap: break-word — allows the browser to break an otherwise unbreakable word at an arbitrary point to prevent overflow. The word only breaks if it cannot fit on its own line. This is the most widely supported option.
• overflow-wrap: anywhere — works like break-word but also allows the broken word fragments to be considered during min-content sizing calculations. This means containers using min-content or fit-content widths can shrink further.

In most cases, overflow-wrap: break-word is the right replacement.

Examples

Deprecated usage

This triggers the W3C CSS validation warning:

<div style="word-break: break-word;">
  Thisislongtext_thatdoesnotcontainanyspaces_andshouldbreakproperly
</div>

Fixed with overflow-wrap: break-word

This is the most common and well-supported fix:

<div style="word-break: normal; overflow-wrap: break-word;">
  Thisislongtext_thatdoesnotcontainanyspaces_andshouldbreakproperly
</div>

Fixed with overflow-wrap: anywhere

Use this if you also want min-content sizing to account for the broken fragments:

<div style="word-break: normal; overflow-wrap: anywhere;">
  Thisislongtext_thatdoesnotcontainanyspaces_andshouldbreakproperly
</div>

In a stylesheet

If the deprecated value appears in a CSS file or <style> block, apply the same fix:

<style>
  /* Deprecated */
  /*
  .content {
    word-break: break-word;
  }
  */

  /* Correct */
  .content {
    word-break: normal;
    overflow-wrap: break-word;
  }
</style>
<div class="content">
  Thisislongtext_thatdoesnotcontainanyspaces_andshouldbreakproperly
</div>

Understanding the difference between overflow-wrap values

<style>
  .container {
    width: min-content;
    border: 1px solid black;
    margin-bottom: 1rem;
  }
  .wrap-break-word {
    overflow-wrap: break-word;
  }
  .wrap-anywhere {
    overflow-wrap: anywhere;
  }
</style>

<!-- With break-word, min-content width is based on the longest word -->

<div class="container wrap-break-word">
  Short words here but_a_very_long_unbreakable_word_too
</div>

<!-- With anywhere, min-content can shrink past even long words -->

<div class="container wrap-anywhere">
  Short words here but_a_very_long_unbreakable_word_too
</div>

With overflow-wrap: break-word, the container’s min-content width will be determined by the longest unbreakable string. With overflow-wrap: anywhere, even that long string can be broken, allowing the container to shrink further. For most use cases where you simply want to prevent text from overflowing a fixed-width container, overflow-wrap: break-word is the straightforward choice.

Learn more:

drafts.csswg.org

CSS Text Module Level 3 spec

→

MDN Reference

MDN: word-break

→

drafts.csswg.org

CSS Text Module Level 3: word-break property

→

GitHub Repository

W3C Validator issue on break-word

→