成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

自定義多行文本溢出方案

Baoyuan / 1120人閱讀

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

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

單行文本溢出是最常見(jiàn)的一種形式，使用text-overflow的ellipsis即可實(shí)現(xiàn)點(diǎn)點(diǎn)點(diǎn)，overflow屬性也不可少，同時(shí)不能讓容器換行，否則不會(huì)出現(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)容的增多，單行文本不夠用了，多行文本才是用的最多的地方。四個(gè)屬性缺一不可，最重要的是-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)是最常見(jiàn)的溢出省略方式，但是21世紀(jì)的設(shè)計(jì)師已經(jīng)不滿足使用點(diǎn)點(diǎn)點(diǎn)的方式來(lái)實(shí)現(xiàn)省略了，他們還需要在尾部顯示更多按鈕，點(diǎn)擊之后顯示全部?jī)?nèi)容。這個(gè)時(shí)候就需要想辦法了，下面的終極方案實(shí)在是精彩，請(qǐng)移步這里，聆聽(tīng)大神講解，

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


    

        
騰訊成立于1998年11月，是目前中國(guó)領(lǐng)先的互聯(lián)網(wǎng)增值服務(wù)提供商之一。成立10多年來(lái)，騰訊一直秉承“一切以用戶價(jià)值為依歸”的經(jīng)營(yíng)理念，為億級(jí)海量用戶提供穩(wěn)定優(yōu)質(zhì)的各類服務(wù)，始終處于穩(wěn)健發(fā)展?fàn)顟B(tài)。2004年6月16日，騰訊控股有限公司在香港聯(lián)交所主板公開(kāi)上市(股票代號(hào)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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/113885.html

相關(guān)文章

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

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

    sugarmo 評(píng)論0 收藏0

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

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

    Pocher 評(píng)論0 收藏0

  • 移動(dòng)端的text-overflow多行文本溢出顯示省略號(hào)(…)

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

    thekingisalwaysluc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<