CSS对文本处理

一.使用ellipsis实现省略号表示超出文本

div{

    overflow: hidden;
    text-overflow: ellipsis;
    
}

二.让文本显示两行

div{

    display: -webkit-box;
    -webkit-line-clamp: 2;
    word-break: break-word;
    -webkit-box-orient: vertical;

}

三.让文本两行显示并用省略号表示超出部分
div{

    border: 1px solid red;
    height: 60px;;
    width: 200px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    word-break: break-word;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    
}