Single-line display omits CSS styles:
Overflow:hidden;
White-space:nowrap;
Text-overflow:ellipsis;
Multiple lines omitted:
Method One,
intwoline1 {
Display:block;
Display:-webkit-box;
max-width:400px;
height:109.2px;
margin:0 Auto;
font-size:26px;
line-height:1.4;
-webkit-line-clamp:3;
-webkit-box-orient:vertical;
Overflow:hidden;
Text-overflow:ellipsis;
}
Method Two,
intwoline2{
Display:-webkit-box!important;
Overflow:hidden;
Text-overflow:ellipsis;
Word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
Method three, using pseudo-element plus absolute positioning
p {
position:relative;
line-height:20px;
max-height:40px;
Overflow:hidden;
}
P::after {
Content: "\02026";
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%);
}
CSS single line ellipsis and multi-line ellipsis method