实现文本超出显示省略号

1.常规的实现方法

 <div class="timestep-description">需要换行的数据</div>

.timestep-description {
  width: 150px; /* 根据需要调整宽度 */
  white-space: nowrap;/* 不换行，在一行显示数据 */
  overflow: hidden;/*超出隐藏 */
  text-overflow: ellipsis;/* 超出部分显示省略号 */
}

2.在某些宽度需要自适应，或者数据是垂直排列的情况下，如el-steps中的description配置项(即不给宽度和nowrap的前提下，实现超出显示省略号)

<el-steps :active="1" align-center>
  <el-step v-for="(tag, index) in ruleForm" :key="index">
    <template #title>
      <div class="timestep-title">{{ tag.title }}</div>
    </template>
    <template #description>
      <el-tooltip :content="tag.description" placement="bottom-end">
        <div class="timestep-description">{{ tag.description }}</div>
      </el-tooltip>
    </template>
  </el-step>
</el-steps>

.timestep-description {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 设置显示的行数 */
  height: auto; /* 根据需要调整 */
}

display: -webkit-box：将元素设置为弹性盒子模型。
-webkit-box-orient: vertical：设置弹性盒子的方向为垂直。
-webkit-line-clamp: 2：设置在多少行后显示省略号，这里设置为 2 行。
这样，即使不设置宽度和 white-space: nowrap，文本也会在指定的行数后显示省略号。

-webkit-line-clamp 是一个非标准的 CSS 属性，主要在 WebKit 内核的浏览器中有效（如 Chrome 和 Safari）。