CSS|文本溢出隐藏效果（单行&&多行）

/* 单行文本溢出隐藏 */
.single-line-truncate {
  width: 250px; /* 定义容器宽度 */
  white-space: nowrap; /* 确保文本在一行内显示 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}
 
/* 多行文本溢出隐藏 */
.multi-line-truncate {
  width: 250px; /* 定义容器宽度 */
  overflow: hidden; /* 隐藏溢出的内容 */
  display: -webkit-box; /* 使用弹性盒子布局模型 */
  -webkit-line-clamp: 3; /* 限制在3行 */
  -webkit-box-orient: vertical; /* 垂直排列盒子 */
  text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}

这段代码定义了两个类，.single-line-truncate用于单行文本溢出隐藏，.multi-line-truncate用于多行文本溢出隐藏。在多行文本隐藏中，-webkit-line-clamp属性定义了文本的最大行数，超出这个数量的文本会被隐藏。这种方法主要使用了WebKit浏览器的私有属性，因此可能不是所有浏览器都支持，但对于大多数现代浏览器（如Chrome、Safari和Edge）来说，这是一个很好的方案。