css多行文本溢出省略号

作者：身后错过痛过漫长情节ゝ发布日期:2025-04-16 浏览:96

/* 示例代码：实现多行文本溢出显示省略号 */

.ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 设置最大显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

解释说明：

display: -webkit-box;：使用 -webkit-box 引擎来实现多行文本的布局。
-webkit-line-clamp: 3;：限制文本显示的最大行数为 3 行。你可以根据需要调整这个值。
-webkit-box-orient: vertical;：设置盒子的方向为垂直，确保文本按行排列。
overflow: hidden;：当文本超出容器时隐藏多余内容。
text-overflow: ellipsis;：当文本被裁剪时显示省略号。
white-space: normal;：允许文本在必要时换行。

通过这些样式组合，可以实现多行文本溢出时自动显示省略号的效果。

上一篇：animation css

下一篇：css字体颜色