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

資訊專欄INFORMATION COLUMN

自定義多行文本溢出方案

Baoyuan / 1118人閱讀

摘要：成立多年來，騰訊一直秉承一切以用戶價值為依歸的經(jīng)營理念，為億級海量用戶提供穩(wěn)定優(yōu)質(zhì)的各類服務(wù)，始終處于穩(wěn)健發(fā)展?fàn)顟B(tài)。年月日，騰訊控股有限公司在香港聯(lián)交所主板公開上市股票代號。

1.單行文本溢出點(diǎn)點(diǎn)點(diǎn)

單行文本溢出是最常見的一種形式，使用text-overflow的ellipsis即可實(shí)現(xiàn)點(diǎn)點(diǎn)點(diǎn)，overflow屬性也不可少，同時不能讓容器換行，否則不會出現(xiàn)點(diǎn)點(diǎn)點(diǎn)

.ellipsis {
   width: 300px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}
2.多行文本溢出點(diǎn)點(diǎn)點(diǎn)

隨著內(nèi)容的增多，單行文本不夠用了，多行文本才是用的最多的地方。四個屬性缺一不可，最重要的是-webkit-line-clamp，直接定義了要顯示的行數(shù)，

.ellipsis {
    width: 300px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 自定義的行數(shù) */
    overflow: hidden;
}
3.多行文本溢出自定義

點(diǎn)點(diǎn)點(diǎn)是最常見的溢出省略方式，但是21世紀(jì)的設(shè)計(jì)師已經(jīng)不滿足使用點(diǎn)點(diǎn)點(diǎn)的方式來實(shí)現(xiàn)省略了，他們還需要在尾部顯示更多按鈕，點(diǎn)擊之后顯示全部內(nèi)容。這個時候就需要想辦法了，下面的終極方案實(shí)在是精彩，請移步這里，聆聽大神講解，

//dom結(jié)構(gòu)


    

        
騰訊成立于1998年11月，是目前中國領(lǐng)先的互聯(lián)網(wǎng)增值服務(wù)提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經(jīng)營理念，為億級海量用戶提供穩(wěn)定優(yōu)質(zhì)的各類服務(wù)，始終處于穩(wěn)健發(fā)展?fàn)顟B(tài)。2004年6月16日，騰訊控股有限公司在香港聯(lián)交所主板公開上市(股票代號700)。

        

            

            
...更多

        

    


 
.ellipsis {
    position: relative;
    width: 100%;
    max-height: 55px; /* h*n */
    line-height: 18px; /* h */
    overflow: hidden;
    width: 300px
}
.ellipsis-container {
    position: relative;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* n */
    font-size: 50px; /* w */
    color: transparent;
}
.ellipsis-content {
    color: #000;
    display: inline;
    vertical-align: top;
    font-size: 16px; /* f */
}
.ellipsis-ghost {
    position:absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    color: #000;
}
.ellipsis-ghost:before {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 100%;
}
.ellipsis-placeholder {
    content: "";
    display: block;
    float: right;
    width: 50%;
    height: 55px; /* h*n */
}
.ellipsis-more {
    position: relative;
    float: right;
    font-size: 16px; /* f */
    width: 50px; /* w */
    height: 18px; /* h */
    margin-top: -18px; /* -h */
    color: red
}

參考:http://hai.li/2017/03/08/css-...
參考:css3 box屬性

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

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

相關(guān)文章

  • 前端文章- 收藏集 - 掘金

    摘要：我的職業(yè)是前端工程師入門不是應(yīng)該很簡單嗎前端掘金入門前端，是一件很難的事嗎在今天，我也沒有想好一個答案，也不知道怎樣給出一個答案。其他不多說了，這次的內(nèi)容主要深入理解及應(yīng)用前端掘金幾種常見的邊框用法。 GitHub 上學(xué)習(xí)前端開發(fā)的資料（不定期更新） - 前端 - 掘金GitHub 上學(xué)習(xí)前端開發(fā)的資料（不定期更新）... JS 進(jìn)階篇: 這可能是關(guān)于閉包最好的一篇文章 - 前端 - ...

    sugarmo 評論0 收藏0

  • 前端文章- 收藏集 - 掘金

    摘要：我的職業(yè)是前端工程師入門不是應(yīng)該很簡單嗎前端掘金入門前端，是一件很難的事嗎在今天，我也沒有想好一個答案，也不知道怎樣給出一個答案。其他不多說了，這次的內(nèi)容主要深入理解及應(yīng)用前端掘金幾種常見的邊框用法。 GitHub 上學(xué)習(xí)前端開發(fā)的資料（不定期更新） - 前端 - 掘金GitHub 上學(xué)習(xí)前端開發(fā)的資料（不定期更新）... JS 進(jìn)階篇: 這可能是關(guān)于閉包最好的一篇文章 - 前端 - ...

    Pocher 評論0 收藏0

  • 移動端的text-overflow多行文本溢出顯示省略號(…)

    摘要：大家應(yīng)該都知道用屬性來實(shí)現(xiàn)單行文本的溢出顯示省略號。但是這個屬性并不支持多行文本溢出顯示省略號，這里根據(jù)應(yīng)用場景介紹幾個方法來實(shí)現(xiàn)這樣的效果。，可以用來多行文本的情況下，用省略號隱藏超出范圍的文本。 大家應(yīng)該都知道用text-overflow:ellipsis屬性來實(shí)現(xiàn)單行文本的溢出顯示省略號(…)。當(dāng)然部分瀏覽器還需要加寬度width屬性。 overflow: hidden; te...

    thekingisalwaysluc 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<