CSS Wrapping: Word-break and Word-wrap

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.



Leave a reply



Submit