一、单行文本截断 text-overflow
文本溢出经常用到的应该就是 text-overflow:ellipsis
了,只需轻松几行代码就可以实现单行文本截断。
div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
二、-webkit-line-clamp 实现
div {
/* autoprefixer: off */
/* autoprefixer: ignore next */
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);
}