css多行文本省略 line-clamp

合集 - css技巧(5)

1.css中使用百分比时的参照-------持续更新2023-12-262.css文本换行设置2023-12-203.绝对定位居中2023-12-204.使用Element.animate()实现动画2023-12-27

5.css多行文本省略 line-clamp2023-12-28

收起

css多行文本省略 line-clamp

一行文本内容溢出的省略例子：

<div class="container" style="width: 200px;outline: 1px solid red">
    <div class="description" style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet at blanditiis consectetur cupiditate
        distinctio dolore, ea illo ipsa ipsam ipsum laudantium magnam nihil nulla quia recusandae rerum sunt
        temporibus vel.
    </div>
</div>

效果：

要想text-overflow生效，必须要和overflow: hidden;white-space:nowrap;一起搭配使用。

想要显示多行文本再把溢出的内容省略，上面的方法就不能实现了，white-space:nowrap;会让文本在一行显示。
需要使用-webkit-line-clamp属性控制想要显示的行数。

想要该属性生效，需要和以下属性一起使用：

• display: -webkit-box | -webkit-inline-box
• -webkit-box-orient: vertical

修改上面的例子：

<style>
    .description {
        overflow: hidden;
        -webkit-box-orient: vertical;
        //显示一行
        -webkit-line-clamp: 2;
        line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
    }
</style>
 
<div class="container" style="width: 200px;outline: 1px solid red">
    <div class="description">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet at blanditiis consectetur cupiditate
        distinctio dolore, ea illo ipsa ipsam ipsum laudantium magnam nihil nulla quia recusandae rerum sunt
        temporibus vel.
    </div>
</div>

效果：

参考文章：

• -webkit-line-clamp - CSS：层叠样式表 | MDN (mozilla.org)
• [text-overflow - CSS：层叠样式表 | MDN (mozilla.org)](