css--Two lines display ellipsis compatible with Firefox browser

css--Two lines display ellipsis compatible with Firefox browser

Normal wording:

. Ellipse1 {overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} . Ellipse2 {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}

Summed up is: fixed width, forced not to wrap, beyond the hidden, display ellipsis. Four properties

But it's not compatible under Firefox:

Compatible Practices:

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

1. Sets the height to an integer multiple of line-height to prevent the outside text from revealing.
2. Add a gradient background to P::after to prevent text from appearing in half.
3. Because IE6-7 does not display content, it is necessary to add a label compatible with ie6-7 (such as:<span>...<span/>); compatible IE8 needs to be replaced by: after.

css--Two lines display ellipsis compatible with Firefox browser