一、單行文字截斷 text-overflow

文字溢位經常用到的應該就是 text-overflow:ellipsis 了，只需輕鬆幾行程式碼就可以實現單行文字截斷。

div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

二、-webkit-line-clamp 實現

div {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
 

它需要和 display、 -webkit-box-orient 和 overflow 結合使用：

• display:-webkit-box; 必須結合的屬性，將物件作為彈性伸縮盒子模型顯示。

• -webkit-box-orient; 必須結合的屬性，設定或檢索伸縮盒物件的子元素的排列方式。

• text-overflow:ellipsis; 可選屬性，可以用來多行文字的情況下，用省略號“…”隱藏超出範圍的文字。

三、定位元素實現多行文字截斷

p {
    position: relative;
    line-height: 
    18px;
    height: 
    36px;
    overflow: hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;
/* 為了展示效果更好 */
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}