CSS controls text wrapping, cropping

Some CSS properties about line wrapping, cropping

Word-wrap:normal | Break-word

Normal line wrap, content can burst containers, such as long words or long numbers of cases
Break-word the word as the line, and if necessary, the words inside the word are allowed to break

Word-break:normal | Break-all | Keep-all

Normal line wrap, content can burst containers, such as long words or long numbers of cases

Break-all using letters as the basis for line breaks

Keep-all is the same as normal in Chinese and English

White-space:normal | | Pre | | nowrap | | Pre-line | | Pre-wrap | | Inherit

Normal default, blank will be ignored by the browser

The pre blank is reserved by the browser and behaves like a <pre> tag in HTML

nowrap text does not wrap, text will be on the same line until <BR/> tag is encountered

Pre-wrap preserves sequence of whitespace characters, but wraps normally (ie7-not supported)

Pre-line merges a sequence of whitespace characters, but preserves newline characters (ie7-not supported)

Inherit specifies that the value of the White-space property should be inherited from the parent element (ie not supported)

Application:

Text overflow shows ellipsis (...) ）：

Text-overflow:ellipsis;
Overflow:hidden;
White-space:nowrap;

Word Wrapping:

/* Use words as a line-change basis */
Word-wrap:break-word;
Word-break:normal;
/* Use letters as the basis for line break */
Word-break:break-all;

The text force does not break the line:

White-space:nowrap;

The above is a small series to introduce you to the CSS control text wrapping, cutting, I hope we have some help, if you have any questions please give me a message, small series will promptly reply to you. Thank you very much for your support for topic.alibabacloud.com!