css显示两行超出部分省略号

作者：／神經病／发布日期:2025-10-07 浏览:50

.error {
  /* error */
}

实际上，根据您的要求，以下是正确的示例代码及解释：

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

解释说明：

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

将这个类应用到需要限制两行显示并超出部分显示省略号的元素上即可。

上一篇：css径向渐变

下一篇：css 渐变背景色