CSS implements single-line and multi-line text overflow to show ellipsis, and css single-line overflow ellipsis

CSS implements single-line and multi-line text overflow to show ellipsis, and css single-line overflow ellipsis

If you use the ellipsis (ellipsis) for overflow display of a single line of text, you must use the text-overflow: ellipsis attribute. Of course, you must add the width and width to support partial browsing.

Implementation Method:

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

 

Effect:

However, this attribute only supports displaying ellipsis in a single line of text. If we want to display ellipsis in multiple lines of text overflow.

Next, we will focus on displaying ellipsis in multi-line text overflow, as shown below.

 

Implementation Method:

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;

 

Effect:

 

 

Applicability:
This method is applicable to WebKit browsers and mobile terminals because WebKit CSS extension attributes are used;

Note:

Implementation Method:

 

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;background: -webkit-linear-gradient(left, transparent, #fff 55%);background: -o-linear-gradient(right, transparent, #fff 55%);background: -moz-linear-gradient(right, transparent, #fff 55%);background: linear-gradient(to right, transparent, #fff 55%);}

 

Effect:

 

Applicability:
This method is applicable to a wide range of fields, but there will also be ellipsis in the case of text travel not exceeding the limit, you can use js to optimize this method.

Note: