版权声明：我写的你不能转载，但是你可以复制啊。复制记得加关注啊（迷之微笑）。 https://blog.csdn.net/quhongqiang/article/details/83791352
一、单行文本截断 text-overflow
文本溢出经常用到的应该就是 text-overflow:ellipsis 了，只需轻松几行代码就可以实现单行文本截断。
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}二、-webkit-line-clamp 实现
div {
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}它需要和 display、 -webkit-box-orient 和 overflow 结合使用：
-
display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。 -
-webkit-box-orient;必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。 -
text-overflow:ellipsis;可选属性，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。
三、定位元素实现多行文本截断
p {
position: relative;
line-height:
18px;
height:
36px;
overflow: hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
/* 为了展示效果更好 */
background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}