效果图:
1. 单行
.text-overflow-ellipsis {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
2. 多行
.text-overflow-ellipsis-line {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;//设置行数
-webkit-box-orient: vertical;
}
代码: 以下是完整代码
<template>
<div class="white-body-view">
<div class="item-view text-overflow-ellipsis">{{ testData }}</div>
<div class="item-view text-overflow-ellipsis-line">{{ testData }}</div>
</div>
</template>
<script>
export default {
data() {
return {
testData: '这是测试文字,这是测试文字,这是测试文字,这是测试文字,这是测试文字,这是测试文字,这是测试文字,这是测试文字'
}
}
}
</script>
<style lang="scss">
.item-view {
width: 300px;
margin-top: 50px;
}
.text-overflow-ellipsis {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.text-overflow-ellipsis-line {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;//设置行数
-webkit-box-orient: vertical;
}
</style>