文字超出一行或者指定行数（多行）显示点点点（...），-webkit-line-clamp

    关于标题提到的超出多行显示点点点“...”的问题，在之前我爱模板网总结了两种方法：
        css多行文字超出显示点点点...-webkit-line-clamp详解
        js控制多行文字超出显示点点点“...”

    一行文字超出显示点点点“...”，非常简单：

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

    注意：上面这段代码要想起作用，前提是.line这个容器必须有宽度，如果是flex-item，也必须固定宽度，如：

.line{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width:500px;
    flex-shrink:0;  //必须加上，否则宽度没作用。
}

    多行文字超出显示点点点“...”（当然，也适用于一行）:

.line2{
    -webkit-line-clamp: 2;  //这里就是行数，想限制多少行就写多少
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！