怎么把多余文字轉化為省略號？

 

先看看最簡單的，利用 text-overflow:ellipsis 實現單行文本溢出顯示省略號效果

overflow: hidden;
text-overflow: ellipsis;//clip|ellipsis

white-space: nowrap;

效果如下：

所有主流瀏覽器都支持 text-overflow 屬性。但這個屬性僅適用於單行文本，多行的情景遠比單行復雜。

 

1.利用 -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;

效果圖：

看起來代碼量不多，也較易理解，將盒子設置成-webkit-box，方向設置為垂直后設定需要的行數 -webkit-line-clamp 即可

缺點是這種方法僅適用於webkit內核或移動端頁面。在火狐，ie等瀏覽器並不支持。

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

思路是設定固定寬高，多余部分隱藏，在結尾用包含省略號（...）的元素覆蓋部分內容。

.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 的三倍。需要顯示幾行文字就設置為幾倍。

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

ps:如果要兼容ie6或7，則不能使用偽元素，可以使用一個<div>或者<span>標簽。如果要支持ie8，需要將::after寫成:after。

效果如下：

同樣這種方法也存在一些問題

首先是當文字內容有過多標點時容易造成結尾單個字體被遮蓋部分的現象。

這點可以將省略號元素的背景顏色設置一個左到右透明加深的特效，並適當增加與文字的距離。或者控制文本內容符號的使用。

其次當文字內容並沒有超過固定行數的時候，比如只有一行或者兩行時，省略號也會固定顯示在div的右下角。

或者文字內容只占據到第三行的中間時，省略號也會固定在右下角並不會跟隨在文字的最后。不美觀。

可以在div中增加一個p標簽，用js判斷，當p元素高度達到父元素固定高度時顯示省略號元素。

HTML代碼：

<div class="demo">
<p>啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊哈啊</p>
<div class="demo1">...</div>
</div>

css:

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

 javascript:

if($(".demo p").height()<=$(".demo").height()){
            $(".demo1").hide();
        }

 

3.js代碼判斷字數

//demo為需要切割的div，num為限制字數
1 function cut(demo,num){
        var str=demo.html();
        if(str.length>=num){
            var strN=str.substring(0,num);
            strN+="...";
            demo.html(strN);
        }
    }

 參考資料：http://www.css88.com/archives/5206