自定義多行文本溢出方案

Baoyuan 發布于2019-08-29 16:39 / 1056人閱讀

摘要：成立多年來，騰訊一直秉承一切以用戶價值為依歸的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處于穩健發展狀態。年月日，騰訊控股有限公司在香港聯交所主板公開上市股票代號。

1.單行文本溢出點點點

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

.ellipsis {
   width: 300px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
}

2.多行文本溢出點點點

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

.ellipsis {
    width: 300px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 自定義的行數 */
    overflow: hidden;
}

3.多行文本溢出自定義

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

//dom結構

    
        騰訊成立于1998年11月，是目前中國領先的互聯網增值服務提供商之一。成立10多年來，騰訊一直秉承“一切以用戶價值為依歸”的經營理念，為億級海量用戶提供穩定優質的各類服務，始終處于穩健發展狀態。2004年6月16日，騰訊控股有限公司在香港聯交所主板公開上市(股票代號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屬性

GPU云服務器云服務器溢出文本讀取多行文本 php文本溢出省略 html里的多行文本

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113885.html

前端文章- 收藏集 - 掘金

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

sugarmo 2019-08-20 18:27 評論0 收藏0
前端文章- 收藏集 - 掘金

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

Pocher 2019-08-29 13:05 評論0 收藏0
移動端的text-overflow多行文本溢出顯示省略號(…)

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

thekingisalwaysluc 2019-08-30 10:49 評論0 收藏0