文本超过宽度显示省略号

Posted 2020-09-05 进击的前端狗

文本超过宽度，以省略号显示有2种，

第一种单行不换行

<style>
.text1 {
    width:200px;
    overflow:hidden;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -moz-text-overflow:ellipsis;
    white-space:nowrap;
}
</style>

　　

 

第二种2行或者2行以上的文本要在结尾省略号超出部分

    width:200px;    
    word-break:break-all;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;