CSS controls text wrapping and cropping

This time I will bring you the line wrapping and clipping of CSS controlled text. What are the precautions for CSS controlled text line wrapping and clipping? . Here is a practical case, let’s take a look.

Some CSS properties about line wrapping and cropping

##word-wrap: normal | break-word

normal Normal line breaks, the content can break the container, such as long words or long numbers

break-word uses words as the basis for line breaks. If necessary, line breaks are allowed inside the words

word -break: normal | break-all | keep-all

normal Normal line break, the content can break the container, such as long words or long numbers

break-all with 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 value, whitespace will be ignored by the browser

pre whitespace will be retained by the browser, its behavior is similar to the

 tag in HTML
nowrap The text will not wrap, the text will be on the same line until the 
 tag is encountered 
pre-wrap Preserves the whitespace sequence, but wraps normally (IE7-not Supported)
pre-line merges whitespace sequences, but retains line breaks (IE7-not supported)
inherit specifies that the value of the white-space attribute should be inherited from the parent element (IE7-not supported) 
Application: 

Text-overflow displays omission markers (...): 
text-overflow: ellipsis; overflow: hidden; 
white-space: nowrap; 

Text wrap: 
/* Use words as the basis for line breaks*/ 
word-wrap: break-word; 
word-break: normal; 
/* Use letters as the basis for line breaks*/ 
word-break: break-all; 

The text is forced not to wrap: 
white-space: nowrap; 
I believe you have mastered it after reading the case in this article Method, for more exciting information, please pay attention to other related articles on the php Chinese website! 
Recommended reading: 

Using CSS3 to implement mouse floating enlargement of images

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

#How to deal with the disappearance of border lines in CSS
The above is the detailed content of CSS controls text wrapping and cropping. For more information, please follow other related articles on the PHP Chinese website!