如何讓文本只顯示兩行——塊級文字省略

時間 2019-12-07

標籤如何文本顯示兩行文字省略简体版

原文原文鏈接

在頁面顯示中咱們常常會須要進行省略，好比簡介裏面的省略，好比固定div中字數超過限制以後的省略。咱們能夠用css輕鬆作到。javascript

單行文字的省略

單行文字省略比較簡單。關鍵代碼以下：css

<style>
    .single {
        width: 280px;
        text-overflow: ellipsis; /* 文本溢出時顯示省略號來表明被修剪的文本 */
        white-space: nowrap; /* 段落中的文本不進行換行 */
        overflow: hidden; /* 溢出部分隱藏 */
        border:1px solid red;
    }
</style>

<body>
    <p class="single">春天，又稱春季，是四季中的第一個季節，指立春至立夏期間，含節氣有立春、雨水、驚蟄、春分、清明、穀雨</p>
</body>

最終的效果是：java

當一行中的文本不固定的時候，能夠設置一個max-width，當超過這個最大寬度，就進行省略，其餘的時候不省略。常見應用如：歷史搜索記錄裏面的記錄顯示。web

多行文字的省略

多行文字的省略能夠用css來作，也能夠用js來作。先來看看css的作法。spa

css：code

多行文字的省略主要用到-webkit-line-clamp屬性，主要用來限制在一個塊元素顯示的文本的行數。可是這個屬性不規範，要實現該效果，必須結合其餘外來的WebKit屬性。對象

來看具體實現：圖片

<style>
    /*讓文字只顯示2行*/
    .main-agency {
        width: 280px;
        overflow: hidden;
        text-overflow: ellipsis; /* 文本溢出時顯示省略號來表明被修剪的文本 */
        display: -webkit-box; /* 必須結合的屬性 ，將對象做爲彈性伸縮盒子模型顯示 */
        -webkit-box-orient: vertical; /* 必須結合的屬性 ，設置或檢索伸縮盒對象的子元素的排列方式 */
        -webkit-line-clamp: 2; /* 文本須要顯示多少行 */

    }
</style>
<body>
    <div class="main-agency">feeeeeeeeeeee菲菲姐而非減肥法金額菲艾斯阿金費分解分解發黑髮黃三板斧非法即便對方是反黑反腐的勝利會計法撒開了分解機菲菲姐寬帶鏈接覅記得發分解飛機佛山飛機奧利弗下降房價大幅eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
</body>

最終顯示的效果以下：ip

這個省略的效果也能夠用js來作：string

js：

<script>
function subEllipsis(content) {
    content = content.length>24 ? content.substring(0,23)+'...' : content
}
</script>

js的作法適用於最多適配多少個字符的狀況，可是若是想控制顯示幾行的話，css的方式顯然更加方便。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。