css文字超过两行显示省略号

作者：只影天涯发布日期:2026-03-05 浏览:110

/* CSS 代码 */
.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制显示的行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<!-- HTML 示例 -->
<div class="ellipsis">
  这是一段很长的文字，当文字超过两行时会自动显示省略号。这是一段很长的文字，当文字超过两行时会自动显示省略号。这是一段很长的文字，当文字超过两行时会自动显示省略号。
</div>

解释说明：

display: -webkit-box;：将元素设置为弹性盒模型（flexbox），以便更好地控制行数。
-webkit-line-clamp: 2;：限制文本显示的行数为2行，超出部分会用省略号代替。
-webkit-box-orient: vertical;：设置弹性盒模型的方向为垂直方向。
overflow: hidden;：隐藏超出容器的内容。
text-overflow: ellipsis;：当文本溢出时显示省略号。

这段代码可以确保当文字超过两行时，自动显示省略号。

上一篇：css 行距

下一篇：css 元素总宽度