超過固定寬度(或行數)顯示…(或省略)

小學生發表於2019-02-16

作為前端經常遇到的一個需求。對於一些比較長的文字做限制，不顯示，或者顯示省略號。今天特意整理了一下，做個備忘。

1.超出固定長度顯示…

.class{
    width: 400px;
    overflow: hidden;       //這個是設定隱藏的。還有其他的，例如scroll，是超出固定長度，底部顯示滾動條的。
    text-overflow: ellipsis;   //這個就是設定直接隱藏掉文字，還是顯示...的。當前是顯示省略號。直接省略是clip
    display: inline-block;     //根據不同標籤display值，有的不用加。
}

2.超出固定行數顯示…

超出固定行數。顯示省略號，和上面差不多。overflow和text-overflow見上方解釋。

.class{
    overflow: hidden;      
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;  //這裡就是設定超出幾行隱藏
    -webkit-box-orient: vertical;
    display:-webkit-box;  //根據不同標籤display，有的不用加。或者設定成別的屬性，自己可以隨便試試
}

巨坑提醒(多行隱藏)

有的時候，你按照上面的設定。就是不生效。或者本地生效了，react（或者vue）打包到伺服器上就不生效了。你可以在控制檯看看。是不是-webkit-box-orient這個屬性消失了。如果是這樣的話，請看下面的解決辦法。

// 辦法1。
直接在style裡面寫上 display:-webkit-box;就行

//辦法2
.class{
    overflow: hidden;      
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    /* autoprefixer: off */     //對，就是加這兩個註釋就行。
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    display:-webkit-box; 
}

不生效的原因。我也不清楚，網上說法也很多。這個英文話題，好像對原因做了 一些探討，感興趣的可以去看看。（https://github.com/postcss/au…）

相關文章