Extra text converted to ellipsis CSS

1.text-overflow:ellipsis implementation

Overflow:hidden;text-overflow:ellipsis;//clip|ellipsiswhite-space:nowrap;

2.-webkit-line-clamp

Width:200px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient : Vertical;border:solid 1px black;

3. Use the Include ellipsis (...) The implementation of elemental simulation

. demo {    height:200px;    width:200px;    position:relative;    Line-height:1.4em;    Height:4.2em;    Overflow:hidden;}. Demo::after {    content: "...";    Font-weight:bold;    Position:absolute;    bottom:0;    right:0;    padding:0 -20px 1px 45px;    Background-color:white;}

Here, a pseudo-element with an ellipsis and a white background color obscures some of the content. Height is three times times higher than line-height. You need to display a few lines of text set to several times.

This way of thinking is relatively simple, compatibility is better

Extra text converted to ellipsis CSS