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

zgbgx 發布于2019-08-30 15:55 / 1606人閱讀

摘要：對于一些比較長的文本做限制，不顯示，或者顯示省略號。超出固定長度顯示設置文字不換行這個是設置隱藏的。當前是顯示省略號。直接省略是根據不同標簽值，有的不用加。超出固定行數顯示超出固定行數?；蛘弑镜厣Я?，或者打包到服務器上就不生效了。

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

1.超出固定長度顯示...

.class{
    width: 400px;
    white-space: nowrap;    //設置文字不換行
    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，有的不用加?；蛘咴O置成別的屬性，自己可以隨便試試
}

巨坑提醒(多行隱藏)

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

// 辦法1。
直接在style里面寫上 -webkit-box-orient: vertical;就行

//辦法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...）

云服務器 GPU云服務器固定寬度寬度固定 html省略顯示固定右欄寬度

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

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

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

摘要：對于一些比較長的文本做限制，不顯示，或者顯示省略號。超出固定長度顯示設置文字不換行這個是設置隱藏的。當前是顯示省略號。直接省略是根據不同標簽值，有的不用加。超出固定行數顯示超出固定行數?；蛘弑镜厣Я?，或者打包到服務器上就不生效了。作為前端經常遇到的一個需求。對于一些比較長的文本做限制，不顯示，或者顯示省略號。今天特意整理了一下，做個備忘。 1.超出固定長度顯示... .class{...

Flink_China 2019-08-02 14:08 評論0 收藏0
如何讓文本只顯示兩行——塊級文字省略

摘要：在頁面顯示中我們經常會需要進行省略，比如簡介里面的省略，比如固定中字數超過限制之后的省略。單行文字的省略單行文字省略比較簡單。在頁面顯示中我們經常會需要進行省略，比如簡介里面的省略，比如固定div中字數超過限制之后的省略。我們可以用css輕松做到。單行文字的省略單行文字省略比較簡單。關鍵代碼如下： .single { width: 280px; ...

BetaRabbit 2019-08-30 15:55 評論0 收藏0
如何讓文本只顯示兩行——塊級文字省略

摘要：在頁面顯示中我們經常會需要進行省略，比如簡介里面的省略，比如固定中字數超過限制之后的省略。單行文字的省略單行文字省略比較簡單。在頁面顯示中我們經常會需要進行省略，比如簡介里面的省略，比如固定div中字數超過限制之后的省略。我們可以用css輕松做到。單行文字的省略單行文字省略比較簡單。關鍵代碼如下： .single { width: 280px; ...

zollero 2019-08-23 15:18 評論0 收藏0
css實現單行、多行文本超出顯示省略號

摘要：前言項目中我們經常遇到這種需求，需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當對象內文本溢出時不顯示省略標記，而是將溢出的部分裁切掉。前言：項目中我們經常遇到這種需求，需要對單行、多行文本超出顯示為省略號。這篇文章主要總結了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

wing324 2019-08-02 12:05 評論0 收藏0
css實現單行、多行文本超出顯示省略號

摘要：前言項目中我們經常遇到這種需求，需要對單行多行文本超出顯示為省略號。單行文本省略文本溢出顯示省略號文本不會換行語法默認值適用于所有元素當對象內文本溢出時不顯示省略標記，而是將溢出的部分裁切掉。前言：項目中我們經常遇到這種需求，需要對單行、多行文本超出顯示為省略號。這篇文章主要總結了小編解決此問題的方法，有不足之處歡迎大家指正。單行文本省略 showImg(https://segme...

paulquei 2019-08-29 17:20 評論0 收藏0