Mobile multi-line text overflow ellipsis

I. Overflow display ellipsis (Universal) for single-line text

The Text-overflow property specifies what happens when the text overflows the containing element. Ellipsis displays the ellipsis to represent the trimmed text.

The White-space property sets how to handle white space characters within an element. NoWrap indicates that the text does not wrap, and the text continues on the same line until the <br> tag is encountered.

{            overflow: hidden;             text-overflow: ellipsis;             white-space: nowrap;        }

Two. Overflow of multiple lines of text display ellipsis (mobile side)

-webkit-line-clamp is a non-canonical attribute that does not appear in the draft CSS specification. -webkit-line-clamp limits the number of lines of text displayed in a block element.

This property is more suitable for browsers WebKit browsers or mobile (mostly WebKit cores).

To achieve this effect, it needs to combine other foreign webkit properties. Common binding Properties:

• display: -webkit-boxYou must combine the properties to display the object as an elastic telescopic box model.
• -webkit-box-orient:vertical必须结合的属性To set or retrieve the arrangement of child elements of a telescopic box object.

. more {            display: -webkit-box;             -webkit-box-orient: vertical;             Overflow: hidden;             text-overflow: ellipsis;             word-break: break-all;             -webkit-line-clamp:2;        }

Three. Demo

<! DOCTYPE html> One{Overflow:Hidden;Text-overflow:ellipsis;White-space:nowrap; }. more{Display:-webkit-box;-webkit-box-orient:Vertical;Overflow:Hidden;Text-overflow:ellipsis;Word-break:Break-all;-webkit-line-clamp:2; }</style>

Mobile multi-line text overflow ellipsis