1.text-overflow:ellipsis實現

overflow: hidden;
text-overflow: ellipsis;//clip|ellipsis
white-space: nowrap;

2.-webkit-line-clamp　　

width: 200px;
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
border:solid 1px black;

3.用包含省略號(…)的元素模擬實現

.demo {
    height: 200px;
    width: 200px;
    position:relative;
    line-height:1.4em;
    height:4.2em;
    overflow:hidden;
}
.demo::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 -20px 1px 45px;
    background-color:white;
}

這裏用一個包含了省略號，且背景色為白色的偽元素遮蓋了部分內容。高度 height 是行高 line-height 的三倍。需要顯示幾行文字就設置為幾倍。

這種思路實現較為簡單，兼容性也比較好

多余文字轉化為省略號css