Word-wrap,word-break and White-space Summary

The recent page layout encountered more, so intends to summarize the summary.

Word-wrap:

1.normal (Use browser default line-wrapping rules)

2.break-word (content will be wrapped within the boundary, but the English line is segmented by word)

word-break:

1.break-all (both Chinese and English can be segmented directly within the word)

2.keep-all (can only wrap at half-width spaces or hyphens.) ）

3.normal

White-space:

1.pre (line breaks and other whitespace characters will be protected.) This value requires ie6+ or! DOCTYPE statement for Standards-compliant mode support. If! The DOCTYPE declaration is not specified as Standards-compliant mode, and this property can be used but does not work. The result is equal to normal. ）

2.nowrap (forces all text to be displayed in the same line until the text ends or the BR object is encountered.) ）

3.normal

Break-word and Break-all The difference between the two:Word-wrap:break-word will start a new line to place long words, the new line or not put the long word will be a long word forced segmentation, and Word-break: Break-all will not put long words in a new line, when this line can not put the time to directly force the segmentation.

Summarize:

Line: Look at the situation, if there are English words to choose Break-all, if All is the Chinese anthology Break-word

Do not break: try to use White-space:nowrap.

Word-wrap,word-break and White-space Summary