Answer 1

单行：
overflow：hidden;
文本溢出：省略号;
white-space：nowrap;
多行：
display：-webkit-box;
-webkit-box-orient：垂直;
-webkit-line-clamp：3; //行数
溢出：隐藏;
兼容：
p {position：relative; 行高：20px; max-height：40px; overflow：hidden;}
p :: after {content：“...”; 位置：绝对; 底部：0; 右：0; padding-left：40px;
background：-webkit-linear-gradient（left，transparent，#fff 55％）;
background：-o-linear-gradient（右，透明，#fff 55％）;
background：-moz-linear-gradient（右，透明，#fff 55％）;
背景：线性渐变（向右，透明，#fff 55％）;
}

单行：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
多行：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3; //行数
overflow: hidden;
兼容：
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%);
}

这个兼容的方法有个问题，如果出现了数字字母这种，是否会出现盖住半个字的操作。