Word-wrap, word-break, white-space, text-overflow usage

In Div, text la s often occur, and line breaks are messy.
Problem description: 1. If it is a full English string, it does not contain any symbols (including spaces) and does not wrap automatically.
2. If the English and Chinese characters are mixed, a line break (English length> Div length) will be taken at the beginning of the English string, and a line break will not be taken at the end.
3. Wrap the entire English word. And so on. There may be some problems. Here we only list the common ones;

Describes the simple usage of the preceding CSS attribute functions;
Word-wrap: normal | break-word; (line feed)
Normal: the default attribute value. (The specified container boundary is allowed for the content ).
Break-word: the content will wrap in the boundary (this function is available only when the line break of an English word is not truncated and the attribute below the English word is truncated .)

Word-break: normal | break-All | keep-All (line feed)
Normal: if it is a Chinese character, it is a line break to the Chinese character at the boundary. If the length of an English string exceeds the boundary, the subsequent part will open the border, if the border is fixed, the subsequent parts cannot be displayed.
Break-ALL: force line feed, will cut off the English word
Keep-ALL: The word cannot be disconnected. If it is a Chinese character, a Chinese character phrase in the punctuation marks will be completely wrapped, and the English word will also be wrapped. Note: if an English word appears. if the string length exceeds the boundary, the subsequent parts of the string will open the border. If the border is fixed, the subsequent parts will not be displayed.

Text-overflow: Clip | ellipsis (Text overflow)
Clip: do not show the omitted mark (...), but simply crop
Ellipsis: when the text in the object overflows (beyond width), the omitted mark (...) is displayed (...)

White-space: normal | pre | nowrap (content does not wrap)
Normal default. The blank space is ignored by the browser.
Pre blank is retained by the browser. The behavior is similar to the <PRE> label in HTML.
The nowrap text will not wrap, and the text will continue on the same line until the <br> label is encountered.
(Put a table in the layer. If float: none on the layer, there is a gap between the table and the layer. The solution to this problem is to add white-space: nowrap in the layer style)

Usage: Word-break: Break-all;

Generally:
. Body {
Word-wrap: Break-word;
Word-break: Keep-all;
Overflow: hidden;
}

. CSS {
Text-overflow: ellipsis;
White-space: nowrap;
Overflow: hidden;
}

IE and Firefox regard it as a long word, so it will not wrap automatically.
For IE, you can use the proprietary CSS attribute word-wrap of IE to achieve automatic line feed: Word-wrap: Break-word;

For Firefox, The css2 standard does not define attributes similar to word-wrap. You can use the overflow attribute to hide the supported attributes: overflow: hidden