When there is too much text on the page, how do I use CSS to make the ellipsis appear in excess? (Single/Multiple lines of code demo)

When a page text is too lengthy, not only not conducive to the user's visual feelings, but also not conducive to the optimization of the site. So how do we use the CSS out of the partial display ellipsis instead? This article will give you a detailed description of the CSS beyond the partial display ellipsis how to implement it? Hope to have the help of friends who need!

CSS out-of-section display ellipsis specific sample code is as follows:

<! DOCTYPE html>
Effects such as:


Note: The above is to implement a single line of text overflow display ellipsis with the Text-overflow:ellipsis attribute, also need to add width of the genus to be compatible with the partial browsing.

Then a single line knows how to operate, and it's easy to do more. The implementation of multiple lines is mainly the following code:

Display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;
CSS is beyond the scope of the omitted partial compatibility:
Due to the use of WebKit CSS extension properties, this method is suitable for WebKit browser and mobile side;

Note:

-webkit-line-clamp is used to limit the number of lines of text displayed in a block element. To achieve this effect, it needs to combine other WebKit properties. Common binding Properties:

Display:-webkit-box; You must combine the properties to display the object as an elastic telescopic box model.

-webkit-box-orient must combine properties to set or retrieve the arrangement of child elements of a telescopic box object.