CSS control text line wrapping and clipping

This time for you to bring CSS control text wrapping and clipping, CSS control text wrapping and cutting attention to what matters, the following is the actual case, together to see.

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;

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Using CSS3 to realize mouse floating enlarged picture

How to deal with the nth-child () compatibility problem under IE8

How to deal with the disappearance of CSS boundary lines