overflow-wrap

Definition

The "overflow-wrap" property is a CSS property that specifies how to handle words and other content that does not fit within its container's width. This property allows developers to control whether the browser should break long words and wrap them onto the next line, or if it should let them overflow outside of the container.

Examples

Using "overflow-wrap" with the "normal" value. With this CSS, long words in <p> elements will only be broken if there is no other option, such as when a word is wider than the container itself:

p {
  overflow-wrap: normal;
}

Using "overflow-wrap" with the "break-word" value. With this CSS, long words in <p> elements will be broken as necessary to prevent them from overflowing outside of the container, even if there is enough space to fit the word on one line:

  p {
  overflow-wrap: break-word;
}

Values

Best Practices

• Use "overflow-wrap: break-word" to prevent words from overflowing outside of their container.
• Avoid using "word-wrap", which is deprecated in favor of "overflow-wrap".
• Be mindful of the impact of "overflow-wrap" on the layout and readability of your content, especially in narrow or responsive containers.
• Use hyphens or other techniques to improve the readability of broken words when possible.
• Consider using a CSS preprocessor or utility class to apply "overflow-wrap" consistently across your project.

Browser Compatibility