[Front-end CSS] : Ellipsis display when multiple lines overflow

Reference:

MDN -webkit-line-clamp)

Micro channel small program development package – card component source

Requirements:

Requirements as shown in the figure:

• Achieve a maximum of 4 lines in each card, and ellipsis is displayed in the excess part… ;
• When double – clicked again, the entire content of the article will be displayed. (Control whether the content of the article is displayed in full through dynamic classes)

- Webkit-line-clamp is an unsupported webkit property that does not appear in the draft CSS specification. To achieve this effect, it needs to combine other exotic WebKit properties. Common combination attributes: display: -webkit-box; Properties that must be combined to display the object as an elastic stretchable box model. -webkit-box-orient Specifies the attribute that must be attached to set or retrieve the arrangement of child elements of a flex box object. Text-overflow, which can be used for multi-line text with ellipsis "..." Hide out-of-range text.Copy the code

	.read-more{
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 4;       
			overflow: hidden;
			text-overflow:ellipsis;
			}
Copy the code