css文本超出2行显示省略号

作者：我在坚强也需要有人疼发布日期:2025-02-11 浏览:106

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

.ellipsis-2-lines {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制文本显示的行数为2行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

解释说明：

display: -webkit-box;：使用弹性盒子模型来布局内容。
-webkit-line-clamp: 2;：限制文本显示的行数为2行。超过的部分会用省略号（...）代替。
-webkit-box-orient: vertical;：设置盒子的方向为垂直，以便按行显示文本。
overflow: hidden;：隐藏超出容器的内容。
text-overflow: ellipsis;：当文本溢出时，使用省略号表示。
white-space: normal;：允许文本在需要时自动换行。

这个样式适用于大多数现代浏览器，但请注意 -webkit 前缀是特定于 WebKit 浏览器的（如 Chrome 和 Safari）。

上一篇：css 背景颜色渐变

下一篇：css实现自动轮播图