overflow-wrap
Also known as word-wrap. Breaks words if they would overflow the container instead of creating a scrollbar.
Quick example
.container { overflow-wrap: break-word; }Syntax
normal | break-word | anywhereQuick facts
normalExamples
Break long URLs in comments
.comment {
overflow-wrap: break-word;
word-break: break-word;
}
/* Long URLs like https://example.com/very-long-path-that-might-overflow will wrap */Prevent long words (URLs, email addresses) from breaking the layout by allowing them to wrap at any point.
Handle user-generated content safely
.user-content {
overflow-wrap: break-word;
max-width: 100%;
}
/* User pastes long text without spaces, still fits in box */When displaying user-generated content, overflow-wrap ensures it won't overflow its container.
Compare break-word vs normal
.card {
overflow-wrap: break-word; /* breaks long words */
white-space: pre-wrap; /* preserves spaces and line breaks */
}overflow-wrap only breaks words if no natural break point exists, respecting spaces and hyphens.
overflow-wrap Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2018.
Safe to use without fallbacks.
Common pitfalls
overflow-wrap will break a long word ONLY if it has no other choice. If there's a space or hyphen, it breaks there first. Set word-break: break-all to force breaking at any character.
overflow-wrap: break-word breaks only if the word would overflow. word-break: break-all breaks at any character. Choose based on whether you want natural breaks first or forced breaks.
overflow-wrap only matters if there's a constraint forcing the text narrow. Without a max-width or container width, long words have space to fit and won't break.