css方式实现文本溢出显示省略号

有多种CSS方式可以实现文本溢出显示省略号。以下是三种常用的方法：

方法一：使用text-overflow属性和ellipsis值

div {
  width: 300px;
  border: 1px solid gray;
  white-space: nowrap; /* 让文本不折行 */
  overflow: hidden; /* 让超出的文本隐藏 */
  text-overflow: ellipsis; /* 超出的文本显示成省略号 */
}

方法二：使用伪类选择器(::after)添加省略号

div {
  width: 300px;
  border: 1px solid gray;
  white-space: nowrap; /* 让文本不折行 */
}
div::after {
  content: '...'; /* 添加省略号 */
}

方法三：使用伸缩盒子样式实现多行文本溢出显示省略号

div {
  width: 300px;
  display: -webkit-box; /* 使用伸缩盒子样式 */
  -webkit-box-orient: vertical; /* 让文本纵向排列，垂直显示 */
  -webkit-line-clamp: 3; /* 省略号显示在第三行 */
  overflow: hidden; /* 让超出的文本省略掉 */
}