最近做手機端的專案，商品標題格式要求超出兩行的內容以省略號展示，最初的方法是用css進行控制，具體樣式如下：

p {
    text-overflow: -o-ellipsis-lastline;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

使用這種方法，在大多數瀏覽器下是沒有問題的，但是在極少數相容性相對比較差的環境下也會有bug，比如遇到中文符號或者特殊符號的時候省略號的位置會亂竄。也嘗試使用jquery.dotdotdot這款外掛，英文狀態下也是沒有問題的，但遇到中文就會出現各種各樣的不適配，換行不固定，省略號不固定，所以也比較不如意。隨後又在網站找資料看解決方案，當我看到下面這段程式碼的時候，忽然覺得眼前一亮，這個方法真的是很方便，而且也不會出現瀏覽器相容性的問題，隨後拿到專案中進行測試，可以實現也很好用，在這裡推薦給大家，希望以後在遇見這類問題的時候可以多一個解決思路。

以下是jquery程式碼（通過從後向前逐個刪除末尾字元，直至元素的高度小於父元素高度）：

$(".figcaption").each(function(i){
    var divH = $(this).height();
    var $p = $("p", $(this)).eq(0);
    while ($p.outerHeight() > divH) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };
});

用的html和css程式碼如下：

<div class="title_wrap"><p class="pro_title">${vsShopProduct.product.title}</p></div>
 

.title_wrap{ height: 42px; overflow: hidden;}

附原文連結地址：http://c7sky.com/text-overflow-ellipsis-on-multiline-text.html