Vue中如何设置文本在高度50px后超出部分显示为五个省略号？

要实现这个效果，核心是通过CSS控制容器溢出隐藏，再利用伪元素添加自定义的五个省略号，以下是具体实现方案：

实现步骤 #

1. 给文本容器设置固定高度、溢出隐藏，并开启相对定位，为省略号定位做准备
2. 调整行高，确保文本在50px容器内的显示行数符合预期
3. 通过伪元素::after添加五个省略号，定位在容器右下角，用背景色覆盖超出的文本

Vue组件示例代码 #

<template>
  <div class="text-ellipsis-container">
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
    𝐋𝐨𝐫𝐞𝐦 𝐢𝐩𝐬𝐮𝐦 𝐝𝐨𝐥𝐨𝐫 𝐬𝐢𝐭 𝐚𝐦𝐞𝐭
  </div>
</template>

<style scoped>
.text-ellipsis-container {
  height: 50px;
  line-height: 20px; /* 根据需求调整，适配50px高度的显示行数 */
  overflow: hidden;
  position: relative;
  padding-right: 22px; /* 给五个省略号留出足够空间 */
  box-sizing: border-box;
  background-color: #fff; /* 容器背景色，需和伪元素背景色一致 */
}

.text-ellipsis-container::after {
  content: '.....';
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff; /* 覆盖超出的文本 */
  padding-left: 5px; /* 避免省略号和文本过于拥挤 */
}
</style>

注意事项 #

• 伪元素的背景色必须和容器背景色一致，否则会透出后面的文本内容
• padding-right的取值要根据省略号的宽度调整，确保不会覆盖正常显示的文本
• line-height可以根据需求微调，比如想要显示更多行，可适当减小行高值

内容的提问来源于stack exchange，提问作者Meow