CSS Wrapping overview: word-break and word-wrap
word-break: normal; // This value is the default property of the browser: in words; keep-all This value is rarely used due to poor compatibility, word-wrap: normal; // This value is the default property of the browser: in words.
Pure English or pure numbers: regarded as a word, no line break.
Encountered English spaces or line breaks: line breaks.
Encounter English words and English spaces: wrap at spaces without breaking words.
word-break: break-all; // This value means that the word should also be broken, and it should be broken.
Pure English or pure numbers: truncate the word directly to a new line.
Encounter an English space or a newline: it will wrap.
Encountered English words and English spaces: truncate words at spaces.
word-wrap: break-word; // This value means that if the pure word exceeds the length, the new line will be truncated, and other words will not.
Pure English or pure numbers: truncate the word directly to a new line.
Encounter an English space or a newline: it will wrap.
Encountered English words and English spaces: wrapping at spaces does not truncate words.
Range of Newlines
word-break: break-all; > word-wrap: break-word; > word-break: normal; word-wrap: normal;
CSS Wrapping Summary: word-break and word-wrap
1. By default, the browser wraps lines in units of words. Words cannot be split. If you can't squeeze it, it will start a new line.
2. word-break: break-all means that when it is exceeded, a new line is required, and the word is to be split.
3. word-wrap: break-word means that if a word exceeds the line length, a new line should be intercepted. Others are default.
4. word-break: normal; word-wrap: normal; indicates the default behavior of the browser, which is point 1.