word-break
Controls whether words can break at arbitrary points. Values: normal, break-all, keep-all.
Quick example
.long-url { word-break: break-all; }Syntax
normal | break-all | keep-all | break-word | auto-phraseQuick facts
normalExamples
Force break on any character (aggressive)
.hashtag {
word-break: break-all;
}
/* #verylonghashtag#that#exceeds#width breaks anywhere */Break at any character, even mid-word. Useful for hashtags, product codes, or situations where content must fit.
CJK text breaking
.chinese-text {
word-break: normal; /* Default: breaks between CJK characters */
word-break: keep-all; /* Prevent breaks within words (East Asian text) */
}For Chinese, Japanese, Korean text, keep-all prevents breaking within words and keeps text readable.
Allow breaks for long email addresses
.email-list {
word-break: break-word;
}
/* Prefers space/hyphen, but breaks long emails if needed */Combine word-break with overflow-wrap to handle edge cases like consecutive long words.
word-break Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2011.
Safe to use without fallbacks.
Common pitfalls
word-break: break-all breaks at any character, which can look ugly in English text. Use overflow-wrap: break-word instead to respect natural break points first.
keep-all prevents breaks between CJK characters but allows breaks at spaces. Using it on English text has no visible effect since English already breaks at spaces.
The default word-break: normal behavior differs by language (CJK vs others). Test with actual content in your target language.