css多行文本省略 line-clamp

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>

效果：

参考文章：

posted @ 2023-12-28 22:48  Ewar-k  阅读(92)  评论(0)    收藏  举报