如何用CSS实现多行文本截断并添加末尾省略号？

需求是给多行文本末尾添加省略号“...”，目前已有的CSS能实现文本截断，但未显示省略号；尝试用伪元素::after添加省略号时，效果怪异且灵活性差。

现有代码 #

HTML代码 #

<ul className="note__tags">
    {tags.map((item) => (
        <li className="note__tag-item">{item}</li>
    ))}
</ul>

现有截断CSS（无省略号） #

&__text {
    @include manrope-15($size: 15px, $weight: 500, $color: $grey-blue);
    width: 270px;
    max-height: 192px;
    overflow: hidden;
    white-space: wrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    position: relative;
}

尝试过的无效方案 #

&__text {
    @include manrope-15($size: 15px, $weight: 500, $color: $grey-blue);
    width: 270px;
    max-height: 192px;
    overflow: hidden;
    white-space: wrap;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    position: relative;

    &::after {
      content:"...";
      position: absolute;
      bottom: 0;
      right: 40px;
      color: black;
    }
}

正确解决方案 #

使用WebKit原生的多行文本省略属性，这是最简洁、兼容性较好的实现方式，无需依赖伪元素。修改后的CSS如下：

&__text {
    @include manrope-15($size: 15px, $weight: 500, $color: $grey-blue);
    width: 270px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    // 指定文本最多显示的行数，可根据需求调整
    -webkit-line-clamp: 6;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

方案说明 #

• -webkit-line-clamp：设置文本允许显示的最大行数，超出部分自动截断
• text-overflow: ellipsis：在文本截断的位置自动添加省略号
• display: -webkit-box和-webkit-box-orient: vertical：配合实现垂直方向的文本流式截断布局

示例对比 #

示例文本 #

自然宛如一幅艺术杰作，森林为大地注入生机，河流在山谷间开辟路径，群山守护着宁静的平原。它的美不仅在于视觉上的壮丽，更在于声音的交响——鸟鸣啁啾、瀑布奔流、微风拂叶。每个季节都带来独特的奇迹：春日繁花振奋精神，夏日温暖滋养生长，秋日色彩将大地染成金黄，冬日寂静包裹万物于祥和之中。自然兼具力量与柔美，提醒人类自身与更宏大事物的联结。它邀请人们去探索、反思，去欣赏生命中那些简单却深刻的喜悦。

预期效果 #

自然宛如一幅艺术杰作，森林为大地注入生机，河流在山谷间开辟路径，群山守护着宁静的平原。它的美不仅在于视觉上的壮丽，更在于声音的交响——鸟鸣啁啾 ...

内容的提问来源于stack exchange，提问作者Nick