CSS Force wrap, prohibit line wrapping, out of hidden implementations

First, forced line break
1 Word-break:break-all; Only works in English, with letters as the basis for line-wrapping.

2 Word-wrap:break-word; Only works in English, with words as the basis for line change.

3 white-space:pre-wrap; Only works on Chinese, forcing line wrapping.


Both Word-break:break-all and Word-wrap:break-word are able to wrap the contents of their containers, such as Div, in the following different lines:

1, Word-break:break-all
Assuming that the div width is 450px, its contents will go to 450px wrap, if there is a long English word at the end of the line, it will truncate the word, part of the end of the row, and the other part to the next line.

2, Word-wrap:break-word
The example is the same as above, but the difference is that it sees the whole word as a whole, and if the end of the line is not wide enough to display the whole word, it automatically puts the whole word on the next line without truncating the word.

Ii. Prohibition of line breaks

1 white-space:nowrap; Overflow:hidden; Text-overflow:ellipsis;
White-space:nowrap; is to prohibit line breaks.
Overflow:hidden; is to let the extra content hidden, otherwise the content will burst the container.
Text-overflow:ellipsis; Let the extra content to ellipsis ... To express. But this attribute is mainly used in IE and other browsers, opera browser with-o-text-overflow:ellipsis; And the Firefox browser does not have this function, the more content can only be hidden.