亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS - 純css實(shí)現(xiàn)多行文本溢出省略（兼容所有瀏覽器）

李義發(fā)布于2019-08-29 12:21 / 3492人閱讀

摘要：前言多行文本超出高度限制出現(xiàn)省略號(hào)移動(dòng)端多為內(nèi)核的有擴(kuò)展屬性但并不是規(guī)范中的屬性端往往要借助去實(shí)現(xiàn)這一效果，但麻煩且不是很靠譜，今天就用純來實(shí)現(xiàn)一個(gè)完全兼容的多行省略。

前言

多行文本超出高度限制出現(xiàn)省略號(hào) , 移動(dòng)端多為webkit內(nèi)核的 , 有擴(kuò)展屬性-webkit-line-clamp , 但并不是CSS規(guī)范中的屬性 , PC端往往要借助js去實(shí)現(xiàn)這一效果，但麻煩且不是很靠譜，今天就用純CSS來實(shí)現(xiàn)一個(gè)完全兼容的多行省略。

正文 一、webkit內(nèi)核的實(shí)現(xiàn)

-webkit-line-clamp設(shè)置塊元素包含的文本行數(shù)；
display: -webkit-box設(shè)置塊元素的布局為伸縮布局；
-webkit-box-orient設(shè)置伸縮項(xiàng)的布局方向；
text-overflow: ellipsis;則表示超出盒子的部分使用省略號(hào)表示。

二、非webkit內(nèi)核實(shí)現(xiàn)

不過本文將要介紹的方法是采用CSS規(guī)范中的屬性，并結(jié)合特殊的實(shí)現(xiàn)技巧完成的。這意味著在實(shí)現(xiàn)CSS2.1規(guī)范的瀏覽器中都是可以兼容的，不將僅僅是純粹的移動(dòng)端領(lǐng)域，在傳統(tǒng)的PC瀏覽器（你們懂得我指的是哪些瀏覽器）中仍是可行的。好吧，讓我們一起見識(shí)下。

一共7個(gè)步驟，最簡(jiǎn)單的就是截?cái)辔谋?，最難的部分則是讓一個(gè)元素出在其父塊的溢出時(shí)的右下方，并且當(dāng)父元素未溢出時(shí)該元素消失不可見。（代碼可直接粘貼看效果）

1、基本結(jié)構(gòu)布局

最簡(jiǎn)單的開始：當(dāng)父包含框比較小時(shí)，將子元素布局到父包含框的右下角；
HTML

    
        
            1.prop
        
        
            2.main 這里是主題內(nèi)容，多行省略
        
        
            3.end

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的位置）, 其實(shí)這個(gè)實(shí)現(xiàn)完全利用了元素浮動(dòng)的基本規(guī)則。

2、定位模擬"..."

我們通過創(chuàng)建一個(gè)子元素來替代將要顯示的省略號(hào)，當(dāng)本文溢出的情形下該元素顯示在正確的位置上。在接下來的實(shí)現(xiàn)中，我們創(chuàng)建一個(gè)realend元素，利用上一步驟中end元素浮動(dòng)后的位置來實(shí)現(xiàn)realEnd元素的定位。
HTML

    
        1.prop
        
            2.main 這里是要多行文本溢出省略的，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)
        
        
            3.end
            realEnd

CSS

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

效果如圖下圖

若父元素并沒有溢出，那么realend元素會(huì)出現(xiàn)在其右側(cè)(設(shè)置wrap overflow：hidden即可，下面會(huì)解決)

3、優(yōu)化定位

第二步中我們針對(duì)end元素設(shè)置了相對(duì)定位，對(duì)realEnd元素設(shè)置了絕對(duì)定位。但是我們可以采用更簡(jiǎn)單的代碼來實(shí)現(xiàn)，即只使用相對(duì)定位。熟悉定位模型的同學(xué)應(yīng)該知道，相對(duì)定位的元素仍然占據(jù)文本流，同時(shí)針對(duì)元素設(shè)置偏移。這樣，就可以去掉end元素了，僅針對(duì)realEnd元素設(shè)置相對(duì)定位。
HTML

    
        1.prop
        
            2.main 這里是要多行文本溢出省略的，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)
        
        realEnd

CSS

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

效果如圖（黃色的end已經(jīng)沒了）

4、削窄prop元素

目前，最左側(cè)的prop元素的作用在于讓realend元素在文本溢出時(shí)處在其正下方，在前幾節(jié)的示例代碼中為了直觀的演示，設(shè)置prop元素的寬度為50px，那么現(xiàn)在為了更好的模擬實(shí)際的效果，我們縮小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; /*等于高度的負(fù)值，就是文字的行高*/
    left: 400px;
    /*而設(shè)置margin-left: -50px、padding-right: 5px則是為了讓realend元素的盒模型的最終寬度計(jì)算為5px。*/
    margin-left: -50px;
    padding-right: 5px;
    background: #FAA;
    font-size: 13px;
}

由于CSS規(guī)范規(guī)定padding的值不可以為負(fù)數(shù)，因此只有設(shè)置margind-left為負(fù)值，且等于其寬度。這樣做的最終目的就是保證realend元素處在prop元素的下方，保證在文本溢出的情況下定位準(zhǔn)確性:

效果圖如下

5、流式布局 + 偽元素

目前，realend元素的相關(guān)屬性仍采用px度量，為了更好的擴(kuò)展性，可以改用%替代。

同時(shí)，prop元素和realend元素可以采用偽元素來實(shí)現(xiàn)，減少額外標(biāo)簽的使用。

CSS

.mutil-line-ellipsis {
    width: 400px;
    height: 50px;
    margin: 20px 20px 50px 300px;
    border: 5px solid #AAA;
    line-height: 25px;
    /*overflow: hidden;*/
}
/*相當(dāng)于之前的prop*/
.mutil-line-ellipsis:before {
    content: "";
    float: left;
    width: 5px;/*縮小寬度為5px，其余屬性不變*/
    height: 50px;
    background: #FAF;
}
/*相當(dāng)于之前的main*/
.mutil-line-ellipsis > :first-child {
    float: right;
    width: 100%;
    margin-left: -5px;/*讓main元素左移5px，這樣main元素在寬度上就完全占滿了父元素；*/
    background: #AFF;
    word-break: break-all;
}
/*相當(dāng)于之前的realEnd*/
.mutil-line-ellipsis:after {
    content: "realEnd";
    float: right;
    position: relative;
    width: 50px;
    height: 25px;
    top: -25px; /*等于高度的負(fù)值，就是文字的行高*/
    left: 100%;
    /*而設(shè)置margin-left: -50px、padding-right: 5px則是為了讓realend元素的盒模型的最終寬度計(jì)算為5px。*/
    margin-left: -50px;
    padding-right: 5px;
    background: #FAA;
    font-size: 13px;
}

HTML


    
        2.main 這里是要多行文本溢出省略的，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)
        內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)，內(nèi)容多一點(diǎn)

效果和上一步一樣

6、隱藏

之前的實(shí)現(xiàn)中在文本未溢出的情況下，realEnd元素會(huì)出現(xiàn)在父元素的右側(cè)，正如

設(shè)置
CSS

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

7、美化

現(xiàn)在我們離完結(jié)就差一步了，即去掉各元素的背景色，并且用“...”替換文本。最后為了優(yōu)化體驗(yàn)，采用漸變來隱藏“...”覆蓋的文本，（省略了一些兼容性的屬性）。
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;
}
/*相當(dāng)于之前的prop*/
.mutil-line-ellipsis:before {
    content: "";
    float: left;
    width: 5px;/*縮小寬度為5px，其余屬性不變*/
    height: 50px;
}
/*相當(dāng)于之前的main*/
.mutil-line-ellipsis > :first-child {
    float: right;
    width: 100%;
    margin-left: -5px;/*讓main元素左移5px，這樣main元素在寬度上就完全占滿了父元素；*/
    word-break: break-all;
}
/*相當(dāng)于之前的realEnd*/
.mutil-line-ellipsis:after {
    content: "...";
    box-sizing: content-box;
    float: right;
    position: relative;
    width: 50px;
    height: 25px;
    top: -25px; /*等于高度的負(fù)值，就是文字的行高*/
    left: 100%;
    /*而設(shè)置margin-left: -50px、padding-right: 5px則是為了讓realend元素的盒模型的最終寬度計(jì)算為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);
}

效果（自己可調(diào)整省略樣式）

總結(jié)之兼容性

從上文的實(shí)現(xiàn)細(xì)節(jié)來看，我們利用的技巧完全是CSS規(guī)范中的浮動(dòng)+定位+盒模型寬度計(jì)算，唯一存在兼容性問題的在于無關(guān)痛癢的漸變實(shí)現(xiàn)，因此可以在大多數(shù)瀏覽器下進(jìn)行嘗試。

GPU云服務(wù)器云服務(wù)器 php文本溢出省略 css省略省略號(hào)css 純CSS

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/111839.html

Failed to recv the data from server completely (SIZE:0/8, REASON:closed)

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！

CSS - 純css實(shí)現(xiàn)多行文本溢出省略（兼容所有瀏覽器）

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來選購！