開發過程中我們可能會遇到這樣的需求：

        有一行文字，不足一行，全部顯示，超出一行，行尾顯示為省略號。

可能你會有些掃操作，用 JS 去動態的判斷，儘管效果已經實現，但是看上去搓的一逼，配不上前端這個詞。

下面給你介紹 兩種 優雅的 方式 ，來實現這個效果。

HTML如下：

<div class="text-to">
       這是測試，這是測試，這是測試，這是測試，這是測試，這是測試，這是測試，
       這是測試，這是測試，這是測試，這是測試，這是測試，這是測試，這是測試，
       這是測試，這是測試，這是測試
</div>

1：一行，超出顯示為省略號

.overflow-to-ellipsis{
    width: 200px;
    background: red;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

}

效果如圖：

但是，某些時候，產品經理似乎總有改不完的需求和各式各樣變態的需求。

比如，兩行超出顯示為省略號

再比如，三行超出顯示為省略號

再比如......

2、多行，超出顯示為省略號

備註：此方法相容性不佳，safari 和 chrome 支援比較好，所以感覺在 移動端 比較好用吧

.text-to {
    background: red;
    color: white;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
     display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
   
}

效果如下： 

修改 -webkit-line-clamp 的 值，就可以控制行數。

親測有效！親測有效！親測有效！

親測有效！親測有效！親測有效！

親測有效！親測有效！親測有效！

歡迎加微信 共同學習：