css超过3行显示为...

作者：只影天涯发布日期:2025-08-07 浏览:71

/* 设置元素的样式，使其在超过3行时显示省略号 */
.text-container {
  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 浏览器（如 Chrome 和 Safari）。
-webkit-line-clamp: 3;：限制文本显示的行数为3行。如果文本超出3行，则会自动截断并显示省略号。
-webkit-box-orient: vertical;：设置盒模型的方向为垂直方向，确保文本按行排列。
overflow: hidden;：隐藏超出容器的内容。
text-overflow: ellipsis;：当文本被截断时，显示省略号 (...)。
white-space: normal;：允许文本换行。

通过这些样式，可以确保当文本内容超过3行时，自动截断并在末尾显示省略号。

上一篇：css计算宽度calc

下一篇：css color