css文本溢出两行显示省略号

作者：思念的回忆发布日期:2026-07-07 浏览:80

/* 示例代码 */
.ellipsis-two-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制文本显示为两行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<!-- HTML 示例 -->
<div class="ellipsis-two-lines">
  这是一段很长的文本，将会在两行后显示省略号。这是一段很长的文本，将会在两行后显示省略号。
</div>

解释说明：

display: -webkit-box;：使用 -webkit-box 布局模型，这是 WebKit 浏览器（如 Chrome 和 Safari）特有的属性，用于多行文本溢出处理。
-webkit-line-clamp: 2;：限制文本显示为两行，超过两行的部分会用省略号代替。
-webkit-box-orient: vertical;：设置盒子的方向为垂直排列，确保文本按行排列。
overflow: hidden;：隐藏超出容器的内容。
text-overflow: ellipsis;：当文本溢出时显示省略号。

这段代码适用于大多数现代浏览器，但在某些非 WebKit 内核的浏览器中可能需要额外的兼容性处理。

上一篇：css画一个三角形

下一篇：css gradient