css 限制行数

作者：黑白灰调发布日期:2026-03-09 浏览:61

/* 限制文本行数的示例代码 */

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

解释说明：

display: -webkit-box;：将元素设置为弹性盒子模型，这是为了兼容 -webkit-line-clamp 属性。
-webkit-line-clamp: 3;：限制文本显示的行数为 3 行。你可以根据需要修改这个值来限制不同的行数。
-webkit-box-orient: vertical;：设置盒子的方向为垂直方向。
overflow: hidden;：隐藏超出容器的内容。
text-overflow: ellipsis;：当文本溢出时，用省略号 (...) 表示被截断的部分。

这样就可以实现文本内容超过指定行数后自动截断并显示省略号的效果。

上一篇：css绝对定位居中

下一篇：css 白色