css實現單行、多行文本超出顯示省略號

前言：項目中咱們常常遇到這種需求，須要對單行、多行文本超出顯示爲省略號。這篇文章主要總結了小編解決此問題的方法，有不足之處歡迎你們指正。

單行文本省略

.ellipsis-line {
    border: 1px solid #f70505;
    padding: 8px;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis; //文本溢出顯示省略號
    white-space: nowrap; //文本不會換行
}

語法：
text-overflow:clip/ellipsis;
默認值：clip
適用於：全部元素
clip： 當對象內文本溢出時不顯示省略標記（...），而是將溢出的部分裁切掉。
ellipsis： 當對象內文本溢出時顯示省略標記（...）。

在使用的時候，有時候發現不會出現省略標記效果，通過測試發現，使用ellipsis的時候，必須配合overflow:hidden; white-space:nowrap; width:具體值;這三個樣式共同使用纔會有效果。

多行文本省略

直接用css屬性-webkit-line-clamp：n;設置

在WebKit瀏覽器或移動端（絕大部分是WebKit內核的瀏覽器）的頁面實現比較簡單，能夠直接使用WebKit的CSS擴展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個 不規範的屬性（unsupported WebKit property），它沒有出如今 CSS 規範草案中。

-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 爲了實現該效果，它須要組合其餘的WebKit屬性。常見結合屬性：

display: -webkit-box; 必須結合的屬性 ，將對象做爲彈性伸縮盒子模型顯示 。

-webkit-box-orient 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 。

text-overflow: ellipsis;，能夠用來多行文本的狀況下，用省略號「…」隱藏超出範圍的文本。

這個屬性只合適WebKit瀏覽器或移動端（絕大部分是WebKit內核的）瀏覽器

.multi-line {
    border: 1px solid #f70505;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

效果如圖所示：

從效果上來看，它的優勢有：

1.響應式截斷，根據不一樣寬度作出調整
2.文本超出範圍才顯示省略號，不然不顯示省略號
3.瀏覽器原生實現，因此省略號位置顯示恰好

可是缺點也是很直接，由於 -webkit-line-clamp 是一個不規範的屬性，它沒有出如今 CSS 規範草案中。也就是說只有 webkit 內核的瀏覽器才支持這個屬性，像 Firefox, IE 瀏覽器通通都不支持這個屬性，瀏覽器兼容性很差。

使用場景：多用於移動端頁面，由於移動設備瀏覽器更可能是基於 webkit 內核，除了兼容性很差，實現截斷的效果不錯。

利用定位和僞類元素

p{
    position: relative; 
    width:400px;
    line-height: 20px; 
    max-height: 60px;
    overflow: hidden;
}
p::after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

效果如圖：

適合場景：文字內容較多，肯定文字內容必定會超過容器的，那麼選擇這種方式不錯。但文字未超出行的狀況下也會出現省略號,可結合js優化該方法。
注：

• 將height設置爲line-height的整數倍，防止超出的文字露出。
• 給p::after添加漸變背景可避免文字只顯示一半。
• 因爲ie6-7不顯示content內容，因此要添加標籤兼容ie6-7（如：<span>…<span/>）；兼容ie8須要將::after替換成:after。

結合js優化代碼

css:

p {
   position: relative;
    width: 400px;
    line-height: 20px;
    overflow: hidden;

}
.p-after:after{
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -moz-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(left, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

js:

$(function(){
 //獲取文本的行高，並獲取文本的高度，假設咱們規定的行數是五行，那麼對超過行數的部分進行限制高度，並加上省略號
   $('p').each(function(i, obj){
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        if((height / lineHeight) >3 ){
            $(this).addClass("p-after")
            $(this).css("height","60px");
        }else{
            $(this).removeClass("p-after");
        }
    });
})

運用第三方插件或者本身寫腳本控制

網上有不少介紹關於使用JavaScript實現多行文本溢出省略的辦法，有的使用插件，有的使用本身封裝好的JavaScript文件，可是，我認爲，仍是本身寫的js比較好用。

//div
<div class="box">北京時間11月18日，蘇州太湖馬拉松女子比賽中，中國選手何引麗最終得到亞軍，落後冠軍5秒。可是賽後，何引麗在社交媒體上道歉，稱本身最後時刻跑累了，沒有拿穩國旗，這到底是怎麼回事？</div>

//css
.box {
    width: 400px;
    height: 40px;
    border: 1px solid #f70505;
    line-height: 20px;
}

//js
    <script type="text/javascript">
        $(function() {
            var content_arr = []; //定義一個空數組
            $('.box').each(function() { //遍歷box內容
                var content = $.trim($(this).text()); //去掉先後文空格
                content_arr.push(content); //內容放進數組
            })
            for (var i = 0; i < content_arr.length; i++) { //遍歷循環數組
                if (content_arr[i].length >= 50) { //若是數組長度（也就是文本長度）大於等於50（數字可本身定義）
                    content = content_arr[i].substr(0, 50) + '...'; //添加省略號並放進box文字內容後面
                    $(".box").eq(i).text(content);
                } else {
                    content = content_arr[i];
                    $(".box").eq(i).text(content);
                }
            }
        })
    </script>

插件：

• clamp.js
• jQuery.dotdotdot

(對於這兩個插件我沒有嘗試過，因此就先不介紹了，在網上了解到運用此插件能夠兼容IE和FF)

float 特性實現多行文本截斷

此方法我在思否上看到有位做者介紹的挺詳細的，可是小編仍是不太清楚，等我明白了在補充上。
參考連接：https://segmentfault.com/a/11...