CSS - 純css實現多行文本溢出省略（兼容全部瀏覽器）

前言

多行文本超出高度限制出現省略號 , 移動端多爲webkit內核的 , 有擴展屬性-webkit-line-clamp , 但並非CSS規範中的屬性 , PC端每每要藉助js去實現這一效果，但麻煩且不是很靠譜，今天就用純CSS來實現一個徹底兼容的多行省略。

正文

1、webkit內核的實現

-webkit-line-clamp設置塊元素包含的文本行數；
display: -webkit-box設置塊元素的佈局爲伸縮佈局；
-webkit-box-orient設置伸縮項的佈局方向；
text-overflow: ellipsis;則表示超出盒子的部分使用省略號表示。

2、非webkit內核實現

不過本文將要介紹的方法是採用CSS規範中的屬性，並結合特殊的實現技巧完成的。這意味着在實現CSS2.1規範的瀏覽器中都是能夠兼容的，不將僅僅是純粹的移動端領域，在傳統的PC瀏覽器（大家懂得我指的是哪些瀏覽器）中還是可行的。好吧，讓咱們一塊兒見識下。

一共7個步驟，最簡單的就是截斷文本，最難的部分則是讓一個元素出在其父塊的溢出時的右下方，而且當父元素未溢出時該元素消失不可見。（代碼可直接粘貼看效果）

一、基本結構佈局

最簡單的開始：當父包含框比較小時，將子元素佈局到父包含框的右下角；
HTML

<div class="wrap">
        <div class="prop">
            1.prop
        </div>
        <div class="main">
            2.main 這裏是主題內容，多行省略
        </div>
        <div class="end">
            3.end
        </div>
    </div>

CSS

.wrap {
    width: 400px;
    height: 50px;
    margin: 20px 20px 50px 300px;
    border: 5px solid #AAA;
    line-height: 25px;
}
.prop {
    float: left;
    width: 50px;
    height: 50px;
    background: #FAF;
}
.main {
    float: right;
    width: 350px;
    background: #AFF;
    word-break: break-all;
}
.end {
    position: relative;
    float: right;
    width: 50px;
    background: #FFA;
}

效果以下面幾張圖（注意黃色end的位置）, 其實這個實現徹底利用了元素浮動的基本規則。

二、定位模擬'...'

咱們經過建立一個子元素來替代將要顯示的省略號，當本文溢出的情形下該元素顯示在正確的位置上。在接下來的實現中，咱們建立一個realend元素，利用上一步驟中end元素浮動後的位置來實現realEnd元素的定位。
HTML

<div class="wrap">
        <div class="prop">1.prop</div>
        <div class="main">
            2.main 這裏是要多行文本溢出省略的，內容多一點，內容多一點，內容多一點，內容多一點，內容多一點，內容多一點，內容多一點，內容多一點，內容多一點，內容多一點
        </div>
        <div class="end">
            3.end
            <div class="realEnd">realEnd</div>
        </div>
    </div>

CSS

// 新增下面樣式便可
.realEnd {
    position: absolute;
    width: 100%;
    height: 25px;
    top: -25px; /*等於高度的負值，就是文字的行高*/
    left: 350px;
    background: #FAA;
    font-size: 13px;
}

效果如圖下圖

若父元素並無溢出，那麼realend元素會出如今其右側(設置wrap overflow：hidden便可，下面會解決)

三、優化定位

第二步中咱們針對end元素設置了相對定位，對realEnd元素設置了絕對定位。可是咱們能夠採用更簡單的代碼來實現，即只使用相對定位。熟悉定位模型的同窗應該知道，相對定位的元素仍然佔據文本流，同時針對元素設置偏移。這樣， 就能夠去掉end元素了，僅針對realEnd元素設置相對定位。
HTML

<div class="wrap">
        <div class="prop">1.prop</div>
        <div class="main">
            2.main 這裏是要多行文本溢出省略的，內容多一點，內容多一點，內容多一點，內容多一點，內容多一點，內容多一點，內容多一點，內容多一點，內容多一點，內容多一點
        </div>
        <div class="realEnd">realEnd</div>
    </div>

CSS

// 刪除end樣式，realEnd樣式更改以下
.realEnd {
    float: right;
    position: relative;
    width: 50px;
    height: 25px;
    top: -25px; /*等於高度的負值，就是文字的行高*/
    left: 350px;
    background: #FAA;
    font-size: 13px;
}

效果如圖（黃色的end已經沒了）

四、削窄prop元素

目前，最左側的prop元素的做用在於讓realend元素在文本溢出時處在其正下方，在前幾節的示例代碼中爲了直觀的演示，設置prop元素的寬度爲50px，那麼如今爲了更好的模擬實際的效果，咱們縮小prop元素的寬度。

CSS

// 更改部分樣式以下
.prop {
    float: left;
    width: 5px;/*縮小寬度爲5px，其他屬性不變*/
    height: 50px;
    background: #FAF;
}
.main {
    float: right;
    width: 400px;
    margin-left: -5px;/*讓main元素左移5px，這樣main元素在寬度上就徹底佔滿了父元素；*/
    background: #AFF;
    word-break: break-all;
}
.realEnd {
    float: right;
    position: relative;
    width: 50px;
    height: 25px;
    top: -25px; /*等於高度的負值，就是文字的行高*/
    left: 400px;
    /*而設置margin-left: -50px、padding-right: 5px則是爲了讓realend元素的盒模型的最終寬度計算爲5px。*/
    margin-left: -50px;
    padding-right: 5px;
    background: #FAA;
    font-size: 13px;
}

因爲CSS規範規定padding的值不能夠爲負數，所以只有設置margind-left爲負值，且等於其寬度。這樣作的最終目的就是保證realend元素處在prop元素的下方，保證在文本溢出的狀況下定位準確性:

效果圖以下

五、流式佈局 + 僞元素

目前，realend元素的相關屬性仍採用px度量，爲了更好的擴展性，能夠改用%替代。

同時，prop元素和realend元素能夠採用僞元素來實現，減小額外標籤的使用。

CSS

.mutil-line-ellipsis {
    width: 400px;
    height: 50px;
    margin: 20px 20px 50px 300px;
    border: 5px solid #AAA;
    line-height: 25px;
    /*overflow: hidden;*/
}
/*至關於以前的prop*/
.mutil-line-ellipsis:before {
    content: '';
    float: left;
    width: 5px;/*縮小寬度爲5px，其他屬性不變*/
    height: 50px;
    background: #FAF;
}
/*至關於以前的main*/
.mutil-line-ellipsis > :first-child {
    float: right;
    width: 100%;
    margin-left: -5px;/*讓main元素左移5px，這樣main元素在寬度上就徹底佔滿了父元素；*/
    background: #AFF;
    word-break: break-all;
}
/*至關於以前的realEnd*/
.mutil-line-ellipsis:after {
    content: 'realEnd';
    float: right;
    position: relative;
    width: 50px;
    height: 25px;
    top: -25px; /*等於高度的負值，就是文字的行高*/
    left: 100%;
    /*而設置margin-left: -50px、padding-right: 5px則是爲了讓realend元素的盒模型的最終寬度計算爲5px。*/
    margin-left: -50px;
    padding-right: 5px;
    background: #FAA;
    font-size: 13px;
}

HTML

<div class="mutil-line-ellipsis">
    <div>
        2.main 這裏是要多行文本溢出省略的，內容多一點，內容多一點，內容多一點，內容多一點
        內容多一點，內容多一點，內容多一點，內容多一點，內容多一點，內容多一點
    </div>
</div>

效果和上一步同樣

六、隱藏

以前的實現中在文本未溢出的狀況下，realEnd元素會出如今父元素的右側，正如

設置
CSS

.mutil-line-ellipsis {
     overflow: hidden;   
}

七、美化

如今咱們離完結就差一步了，即去掉各元素的背景色，而且用「...」替換文本。最後爲了優化體驗，採用漸變來隱藏「...」覆蓋的文本，（省略了一些兼容性的屬性）。
CSS

.mutil-line-ellipsis {
    width: 400px;
    height: 50px;
    line-height: 25px;
    margin: 20px 20px 50px 300px;
    border: 5px solid #AAA;
    line-height: 25px;
    overflow: hidden;
}
/*至關於以前的prop*/
.mutil-line-ellipsis:before {
    content: '';
    float: left;
    width: 5px;/*縮小寬度爲5px，其他屬性不變*/
    height: 50px;
}
/*至關於以前的main*/
.mutil-line-ellipsis > :first-child {
    float: right;
    width: 100%;
    margin-left: -5px;/*讓main元素左移5px，這樣main元素在寬度上就徹底佔滿了父元素；*/
    word-break: break-all;
}
/*至關於以前的realEnd*/
.mutil-line-ellipsis:after {
    content: '...';
    box-sizing: content-box;
    float: right;
    position: relative;
    width: 50px;
    height: 25px;
    top: -25px; /*等於高度的負值，就是文字的行高*/
    left: 100%;
    /*而設置margin-left: -50px、padding-right: 5px則是爲了讓realend元素的盒模型的最終寬度計算爲5px。*/
    margin-left: -50px;
    padding-right: 5px;
    font-size: 13px;
    text-align: right;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #ffffff 40px);
}

效果（本身可調整省略樣式）

總結之兼容性

從上文的實現細節來看，咱們利用的技巧徹底是CSS規範中的浮動+定位+盒模型寬度計算，惟一存在兼容性問題的在於無關痛癢的漸變實現，所以能夠在大多數瀏覽器下進行嘗試。