CSS单行文本或多行文本溢出省略效果考虑兼容性

Twelve--

于 2020-11-18 09:27:19 发布

阅读量329

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： css

本文链接：https://blog.youkuaiyun.com/weixin_43883485/article/details/109764257

CSS 专栏收录该内容

24 篇文章

订阅专栏

博客主要提及了CSS在单行和多行方面的兼容情况，虽未详细阐述，但重点围绕CSS的单行多行兼容展开。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

单行

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

多行

.box2{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    overflow: hidden;
}

兼容

.box3{
    position: relative;
    line-height: 20px;
    max-height: 40px;
    overflow: hidden;
}
.box3::after{
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 40px;
    background: -webkit-linear-gradient(left,transparent,#fff 55%);
    background: -o-linear-gradient(right,transparent,#fff 55%);
    background: -moz-linear-gradient(right,transparent,#fff 55%);
    background: linear-gradient(to right,transparent,#fff 55%);
}