vue中文字超出显示省略号的两种情况，css实现文字超出显示省略号

在Vue中，文字超出显示省略号有两种常见的场景：

1. 单行文本超出省略号
2. 多行文本超出省略号（通常用于评论或者描述等）

单行文本超出省略号

CSS代码：

.single-line-ellipsis {
  white-space: nowrap; /* 保证文本在一行内显示 */
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
}

Vue模板代码：

<template>
  <div class="single-line-ellipsis">这是一段很长的文本，需要显示省略号</div>
</template>

多行文本超出省略号

CSS代码：

.multi-line-ellipsis {
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-box-orient: vertical; /* 垂直排列子元素 */
  -webkit-line-clamp: 3; /* 限制在三行内 */
  overflow: hidden; /* 隐藏超出容器的部分 */
  text-overflow: ellipsis; /* 使用省略号表示被截断的文本 */
}

Vue模板代码：

<template>
  <div class="multi-line-ellipsis">这是一段很长的文本，需要显示省略号，这是一段很长的文本，需要显示省略号</div>
</template>

注意：-webkit-line-clamp属性是一个不是标准的CSS属性，它仅在基于WebKit内核的浏览器中有效，比如Chrome、Safari等，但是大部分现代浏览器都是基于WebKit内核的，所以可以放心使用。