css超过两行显示省略号

作者：暗夜骑士发布日期:2025-06-22 浏览:76

/* 示例代码 */
.text-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 设置行数为2 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

解释说明：

display: -webkit-box;：将元素设置为弹性盒子模型，允许我们使用 -webkit-line-clamp 属性。
-webkit-line-clamp: 2;：限制文本显示的行数为2行，超出部分会用省略号表示。
-webkit-box-orient: vertical;：设置盒子的方向为垂直方向，确保文本按行排列。
overflow: hidden;：隐藏超出容器的内容。
text-overflow: ellipsis;：当文本溢出时，使用省略号（...）来表示被截断的文本。

这样，当文本超过两行时，就会自动显示省略号。

上一篇：css给文字加下划线

下一篇：css隐藏滚动条样式