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

weixin_33807284發表於2019-02-19

在頁面顯示中我們經常會需要進行省略，比如簡介裡面的省略，比如固定div中字數超過限制之後的省略。我們可以用css輕鬆做到。

單行文字的省略

單行文字省略比較簡單。關鍵程式碼如下：

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

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

最終的效果是：

singleEllipsis

當一行中的文字不固定的時候，可以設定一個max-width，當超過這個最大寬度，就進行省略，其他的時候不省略。常見應用如：歷史搜尋記錄裡面的記錄顯示。

多行文字的省略

多行文字的省略可以用css來做，也可以用js來做。先來看看css的做法。

css：

多行文字的省略主要用到-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>

最終顯示的效果如下：

圖片描述

這個省略的效果也可以用js來做：

js：

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

js的做法適用於最多適配多少個字元的情況，但是如果想控制顯示幾行的話，css的方式顯然更加方便。

相關文章