有时我们会有这样的需求:当文本内容较多,宽度超出父容器时,就在最后显示三个点,代表还有东西被折叠起来了。

p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

第 2 行表示强制在一行显示;
第 3 行表示在溢出时显示省略标记(三个点);
第 4 行表示溢出部分内容隐藏。

但有时我们需要实现多行文本末尾折叠,可以使用如下方法,但兼容性较差,可以用于移动端

在这里声明下,火狐和 IE 不支持的

p {
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

第 5 行为要显示的行数

Last modification:November 3rd, 2020 at 09:50 pm
如果觉得我的文章对你有用,请随意赞赏