1、单行溢出:
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
2.多行溢出:
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
该种方法只适用于webkit内核浏览器,其他浏览器暂不支持。
3.多行溢出更适用的方法:
.content {
width: 690px;
max-height: 10rem;
position: relative;
line-height: 1.4em;
overflow: hidden;
}
.content::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%);
}
content为包裹文字的标签,这样会比较好的达到效果。