文本溢出

单行文本溢出

1
2
3
4
5
.overflow-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

多行文本溢出

1
2
3
4
5
6
.overflow-text {
display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-line-clamp: 3; /*用来限制在一个块元素显示的文本的行数*/
overflow: hidden; /*溢出隐藏*/
}

多行文本溢出兼容 IE

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.overflow-text {
overflow: hidden;
position: relative;
height: 38px; /* 溢出行数*行高 */
&::after {
font-size: 18px;
content: "...";
position: absolute;
bottom: 0;
right: 0;
width: 24px; /* ...覆盖内容宽度 */
height: 19px !important;
background-color: #fff;
}
}

JS 解决文本溢出

1
2
3
4
5
6
7
8
9
10
this.$nextTick(() => {
for (let i = 0; i < this.$refs.textHeight.length; i++) {
const list = this.$refs.textHeight[i];
if (list.offsetHeight > 70) {
list.className = "sub-title overflow-text";
} else {
list.className = "sub-title";
}
}
});