Home > Article > Web Front-end > 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 HTMLnowrap The text will not wrap, the text will remain on the same line until it encounters Up to
tagpre-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!