css 两行省略号

作者：我在坚强也需要有人疼发布日期:2025-07-18 浏览:32

/* 示例代码：实现两行省略号效果 */

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

解释说明：

display: -webkit-box;：将元素设置为弹性盒模型，以便使用 -webkit-line-clamp 属性。
-webkit-line-clamp: 2;：限制文本显示的行数为2行。如果文本超出两行，则会显示省略号。
-webkit-box-orient: vertical;：设置弹性盒模型的方向为垂直方向。
overflow: hidden;：隐藏超出容器的内容。
text-overflow: ellipsis;：当文本溢出时，用省略号表示。

这段代码适用于 WebKit 内核的浏览器（如 Chrome 和 Safari）。对于其他浏览器，可能需要额外的兼容性处理。

上一篇：css disabled

下一篇：css flex:1