美文网首页
【CSS】文本溢出时用省略号

【CSS】文本溢出时用省略号

作者: 大Q本Q | 来源:发表于2019-06-19 18:04 被阅读0次

    单行
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    多行
    1
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    2
    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/miqlqctx.html