CSS_文本省略

• CSS

要点：单行用 text-overflow: ellipsis；多行常用固定高度裁剪或 line-clamp。

/* 单行文本溢出 */
p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行文本溢出（固定高度 + 伪元素省略号）*/
p {
  position: relative;
  line-height: 1.5em;
  /* 高度 = 显示行数 × 行高。示例：显示2行，则 2 × 1.5 = 3em */
  height: 3em;
  overflow: hidden;
}
 
p:after {
  content: "...";
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
}

补充：现代方案可用 -webkit-line-clamp（兼容性自行评估）。

.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;     /* 显示 2 行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}