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