CSS 实现单行、多行文本溢出显示省略号

一、单行文本的溢出显示省略

用text-overflow:ellipsis属性。

#div1 {
    //关键代码
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    
    width: 200px;
    height: 100px;
    background-color: #ef0;
}

二、多行文本的溢出显示省略

#div2 {
    //关键代码
    display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow: hidden;
    
    line-height: 20px;
    width: 200px;
    height: 60px; //这里的高度为行数*行高；3*20；
    background-color: #fdd;
}