美文网首页
css文字溢出实现,考虑兼容性

css文字溢出实现,考虑兼容性

作者: 嗯这是网名 | 来源:发表于2019-08-19 14:11 被阅读0次

    单行:

    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    

    多行:

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; //行数
    overflow: hidden;
    

    兼容:

    p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
    p::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%);
    }
    

    相关文章

      网友评论

          本文标题:css文字溢出实现,考虑兼容性

          本文链接:https://www.haomeiwen.com/subject/ghvssctx.html