word-wrap - Overflow Wrapping
The overflow-wrap
(aka word-wrap
) property specifies whether the user agent may arbitrarily break within a word to prevent overflow when an otherwise-unbreakable string is too long to fit within the line box.
normal
: Lines may break only at allowed break points. (Like whitespace)break-word
: An unbreakable word (a complete word) may be broken at arbitrary points if there are no otherwise acceptable break points in the line.
Only work when thewhite-space
property allows wrapping.
word-break - Breaking Rules for Letters
The word-break
property specifies whether to break lines within a word.
normal
: Words break as usualbreak-all
: In addition tonormal
, lines may break between any two letters (for non-CJK (Chinese/Japanese/Korean) text).keep-all
: Don’t allow word breaks for CJK text. Non-CJK text behavior is the same as for normal.
A nice example given by W3C, and this by MDN.
|
|
See the Pen css text by Shawn Dai (@daix6) on CodePen.