一.使用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;
    
}