css超过2行省略号

作者：狂暴的酷发布日期:2026-03-24 浏览:94

/* 示例代码：当文本超过2行时显示省略号 */

.ellipsis-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
  -webkit-box-orient: vertical; /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分用省略号表示 */
}

解释说明：

display: -webkit-box;：使用弹性盒模型布局。
-webkit-line-clamp: 2;：限制文本显示的行数为2行。
-webkit-box-orient: vertical;：设置盒模型的方向为垂直方向。
overflow: hidden;：超出容器的部分隐藏。
text-overflow: ellipsis;：超出部分用省略号表示。

上一篇：css 设置边框

下一篇：css单数选择器