首页 > 建站教程 > CSS3+HTML5 >  文字超出一行或者指定行数(多行)显示点点点(...),-webkit-line-clamp正文

文字超出一行或者指定行数(多行)显示点点点(...),-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;
}