CSS implements single-line and multi-line text overflow to display ellipsis (...), Css

CSS implements single-line and multi-line text overflow to display ellipsis (...), Css

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;

The ellipsis (...) is displayed when multiple lines of text overflow occurs.

Implementation Method:

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

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%);}

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: