css 两行省略

作者：Haggard憔悴发布日期:2025-07-30 浏览:16

/* CSS 两行省略示例代码 */

.ellipsis-two-lines {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 设置显示的行数为2 */
  overflow: hidden;
  text-overflow: ellipsis;
}

解释说明：

display: -webkit-box;：使用弹性盒模型布局。
-webkit-box-orient: vertical;：设置子元素垂直排列。
-webkit-line-clamp: 2;：限制在一个块元素显示的文本的行数为2行，超出部分用省略号表示。
overflow: hidden;：隐藏超出容器的内容。
text-overflow: ellipsis;：当文本溢出时，用省略号（...）表示。

将这个类应用到需要实现两行省略效果的 HTML 元素上即可。

上一篇：css左右居中

下一篇：css背景颜色渐变从左到右