单行， 多行文本溢出

单行 / 多行文本溢出省略的 CSS 实现

1. 单行文本溢出省略

涉及的 CSS 属性：

• overflow: hidden：普通情况下用来隐藏块级元素内部溢出，或者配合下面两个属性实现文本溢出省略。
• white-space: nowrap：设置文本不换行，是 overflow: hidden 和 text-overflow: ellipsis 生效的基础。
• text-overflow：取值有 clip（裁切）和 ellipsis（省略号）；只在设置了 overflow: hidden 和 white-space: nowrap 后才能生效。

.single-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 200px;
}

2. 多行文本溢出省略

多行文本溢出时分两种实现思路：

方案一：基于高度截断（兼容性最好）

.multi-ellipsis {
    position: relative;
    line-height: 20px;
    height: 40px;  /* 恰好显示 2 行 */
    overflow: hidden;
}
.multi-ellipsis::after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 0 20px 0 10px;
    background: linear-gradient(to right, transparent, #fff 50%);  /* 让省略号更自然 */
}

方案二：-webkit-line-clamp（最简洁，仅 webkit 内核）

.multi-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

补充：

• -webkit-line-clamp 在 Chrome、Safari、Firefox 68+、Edge 都已支持；非 webkit 浏览器仍需要 -webkit-box 前缀。
• 现代方案可结合 display: -webkit-box + line-clamp: 2 + text-overflow: ellipsis 实现"兼容性最好 + 代码最简洁"的折中。