css显示两行后多余显示点

作者：冥界少主发布日期:2026-05-28 浏览:89

/* 使用 CSS 实现文本显示两行后多余部分显示省略号的效果 */

.multi-line-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制显示的行数为2 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<!-- HTML 示例代码 -->
<div class="multi-line-ellipsis">
  这是一段很长的文本，当内容超出两行时，会自动截断并在末尾显示省略号。这是一段很长的文本，当内容超出两行时，会自动截断并在末尾显示省略号。
</div>

解释说明：

display: -webkit-box;：使用弹性盒子模型来布局文本。
-webkit-line-clamp: 2;：限制文本最多显示两行，超出部分会被隐藏，并用省略号代替。
-webkit-box-orient: vertical;：设置盒子的方向为垂直排列，确保文本按行显示。
overflow: hidden;：隐藏超出容器的内容。
text-overflow: ellipsis;：当文本溢出时，在末尾显示省略号。

这段代码适用于现代浏览器，特别是基于 WebKit 内核的浏览器（如 Chrome 和 Safari）。

上一篇：css 超出换行

下一篇：css行间距