CSS controls text wrapping and cropping

Some CSS properties about line wrapping and cropping

word-wrap: normal | break-word

normal normal line wrapping , 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 within words

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

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

break-all Use letters as the basis for line breaks

keep-all Same as normal in Chinese and English

white-space: normal || pre || nowrap || pre-line || pre-wrap || inherit

normal default value, blank space will be browsed

pre whitespace will be ignored by the browser and behaves like the

 tag in HTML

nowrap The text will not wrap, the text will remain on the same line until it encounters Up to 
 tag
pre-wrap Keep whitespace sequences, but wrap normally (IE7-not supported)
pre-line Merge whitespace sequences, but keep Newline character (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 ellipsis mark (...): 
text-overflow: ellipsis; 
overflow: hidden; 
white-space: nowrap; 
 
Wrap text: 
/* Use word as line break basis*/ 
word-wrap: break-word; 
word-break : normal; 
/* Use letters as line breaks*/ 
word-break: break-all; 
 Text is forced not to break: 
white-space: nowrap; 
The above is the CSS control text wrapping and cropping introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message. , the editor will reply to everyone in time. I would also like to thank you all for your support of the PHP Chinese website! 
For more articles related to CSS control of text wrapping and cropping, please pay attention to the PHP Chinese website!