css 文字超出隐藏，显示省略号

效果图：

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>