How to set multiple lines beyond the display ellipsis by css
This article mainly introduces how to set css more than display ellipses, the text is very detailed, has a certain reference value, interested friends must read!
Setting method: 1. Use "overflow:hidden;" to hide the excess;2. Use "-webkit-line-clamp: lines;" to limit the number of lines of text displayed;3. Use "text-overflow:ellipsis;" to display ellipses to represent the hidden excess.
Operating environment of this tutorial: Windows 7 system, CSS3 && HTML5 version, Dell G3 computer.
CSS sets multiple lines beyond ellipses
Realization of ideas:
1. Using the "overflow:hidden;" statement does not display the contents exceeding the object size, that is, the excess part is hidden;
2. Use the "-webkit-line-clamp: lines;" statement to limit the number of lines of text displayed
3. Use the "text-overflow:ellipsis;" statement to hide out-of-range text with ellipses "..."
Implementation code:
*{margin: 0px;padding: 0px;} .box{ width: 280px; height: 62px; margin: 50px auto; border: 1px solid red; overflow: hidden; -webkit-line-clamp: 3; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } Css multiline text over length display ellipses, css multiline text over length display ellipses, Css multi-line text over length display ellipses, css multi-line text over length display ellipses
Effect drawing:
Description: Most mobile browsers are WebKit kernel, so this method is suitable for mobile;
-webkit-line-clamp is used to limit the number of lines of text displayed in a block element, which is an unsupported WebKit property that does not appear in the CSS draft specification;
display: -webkit-box Displays the object as an Auto Scaling box model;
-webkit-box-orient Sets or retrieves the arrangement of child elements of the expansion box object;
The above is "how to set css more than display ellipses" all the content of this article, thank you for reading! Hope to share the content to help everyone, more relevant knowledge, welcome to pay attention to the industry information channel!
