<template>
<div class="content">
<div :title="data">{{ data }}</div>
<div :title="data">{{ data }}</div>
<div :title="data">{{ data }}</div>
</div>
</template>
<script>
export default {
data() {
return {
data: "一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示一行超出显示",
};
},
};
</script>
<style scoped lang="scss">
.content div:nth-child(1) {
border: 1px solid red;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
white-space: nowrap;
transition: 0.2s left;
}
.content div:nth-child(2) {
border: 1px solid red;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.content div:nth-child(3) {
border: 1px solid red;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
text-align: left;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
超过1行的要加下面
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;