【css】12.一行超出显示...,两行超出显示...,三行超出显示...

<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;