成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

Flink_China / 2521人閱讀

摘要：對(duì)于一些比較長(zhǎng)的文本做限制，不顯示，或者顯示省略號(hào)。超出固定長(zhǎng)度顯示設(shè)置文字不換行這個(gè)是設(shè)置隱藏的。當(dāng)前是顯示省略號(hào)。直接省略是根據(jù)不同標(biāo)簽值，有的不用加。超出固定行數(shù)顯示超出固定行數(shù)。或者本地生效了，或者打包到服務(wù)器上就不生效了。

作為前端經(jīng)常遇到的一個(gè)需求。對(duì)于一些比較長(zhǎng)的文本做限制，不顯示，或者顯示省略號(hào)。今天特意整理了一下，做個(gè)備忘。

1.超出固定長(zhǎng)度顯示... 
.class{
    width: 400px;
    white-space: nowrap;    //設(shè)置文字不換行
    overflow: hidden;       //這個(gè)是設(shè)置隱藏的。還有其他的，例如scroll，是超出固定長(zhǎng)度，底部顯示滾動(dòng)條的。
    text-overflow: ellipsis;   //這個(gè)就是設(shè)置直接隱藏掉文字，還是顯示...的。當(dāng)前是顯示省略號(hào)。直接省略是clip
    display: inline-block;     //根據(jù)不同標(biāo)簽display值，有的不用加。
}
2.超出固定行數(shù)顯示...

超出固定行數(shù)。顯示省略號(hào)，和上面差不多。overflow和text-overflow見(jiàn)上方解釋。

.class{
    overflow: hidden;      
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;  //這里就是設(shè)置超出幾行隱藏
    -webkit-box-orient: vertical;
    display:-webkit-box;  //根據(jù)不同標(biāo)簽display，有的不用加?；蛘咴O(shè)置成別的屬性，自己可以隨便試試
}
巨坑提醒(多行隱藏)

有的時(shí)候，你按照上面的設(shè)置。就是不生效?；蛘弑镜厣Я?，react（或者vue）打包到服務(wù)器上就不生效了。你可以在控制臺(tái)看看。是不是-webkit-box-orient這個(gè)屬性消失了。如果是這樣的話，請(qǐng)看下面的解決辦法。

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/53594.html

相關(guān)文章

  • 超過(guò)固定寬度(或行數(shù))顯示...(或省略)

    摘要：對(duì)于一些比較長(zhǎng)的文本做限制，不顯示，或者顯示省略號(hào)。超出固定長(zhǎng)度顯示設(shè)置文字不換行這個(gè)是設(shè)置隱藏的。當(dāng)前是顯示省略號(hào)。直接省略是根據(jù)不同標(biāo)簽值，有的不用加。超出固定行數(shù)顯示超出固定行數(shù)?；蛘弑镜厣Я耍蛘叽虬椒?wù)器上就不生效了。 作為前端經(jīng)常遇到的一個(gè)需求。對(duì)于一些比較長(zhǎng)的文本做限制，不顯示，或者顯示省略號(hào)。今天特意整理了一下，做個(gè)備忘。 1.超出固定長(zhǎng)度顯示... .class{...

    zgbgx 評(píng)論0 收藏0

  • 如何讓文本只顯示兩行——塊級(jí)文字省略

    摘要：在頁(yè)面顯示中我們經(jīng)常會(huì)需要進(jìn)行省略，比如簡(jiǎn)介里面的省略，比如固定中字?jǐn)?shù)超過(guò)限制之后的省略。單行文字的省略單行文字省略比較簡(jiǎn)單。 在頁(yè)面顯示中我們經(jīng)常會(huì)需要進(jìn)行省略，比如簡(jiǎn)介里面的省略，比如固定div中字?jǐn)?shù)超過(guò)限制之后的省略。我們可以用css輕松做到。 單行文字的省略 單行文字省略比較簡(jiǎn)單。關(guān)鍵代碼如下： .single { width: 280px; ...

    BetaRabbit 評(píng)論0 收藏0

  • 如何讓文本只顯示兩行——塊級(jí)文字省略

    摘要：在頁(yè)面顯示中我們經(jīng)常會(huì)需要進(jìn)行省略，比如簡(jiǎn)介里面的省略，比如固定中字?jǐn)?shù)超過(guò)限制之后的省略。單行文字的省略單行文字省略比較簡(jiǎn)單。 在頁(yè)面顯示中我們經(jīng)常會(huì)需要進(jìn)行省略，比如簡(jiǎn)介里面的省略，比如固定div中字?jǐn)?shù)超過(guò)限制之后的省略。我們可以用css輕松做到。 單行文字的省略 單行文字省略比較簡(jiǎn)單。關(guān)鍵代碼如下： .single { width: 280px; ...

    zollero 評(píng)論0 收藏0

  • css實(shí)現(xiàn)單行、多行文本超出顯示省略號(hào)

    摘要：前言項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行多行文本超出顯示為省略號(hào)。單行文本省略文本溢出顯示省略號(hào)文本不會(huì)換行語(yǔ)法默認(rèn)值適用于所有元素當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記，而是將溢出的部分裁切掉。 前言：項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行、多行文本超出顯示為省略號(hào)。這篇文章主要總結(jié)了小編解決此問(wèn)題的方法，有不足之處歡迎大家指正。 單行文本省略 showImg(https://segme...

    wing324 評(píng)論0 收藏0

  • css實(shí)現(xiàn)單行、多行文本超出顯示省略號(hào)

    摘要：前言項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行多行文本超出顯示為省略號(hào)。單行文本省略文本溢出顯示省略號(hào)文本不會(huì)換行語(yǔ)法默認(rèn)值適用于所有元素當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記，而是將溢出的部分裁切掉。 前言：項(xiàng)目中我們經(jīng)常遇到這種需求，需要對(duì)單行、多行文本超出顯示為省略號(hào)。這篇文章主要總結(jié)了小編解決此問(wèn)題的方法，有不足之處歡迎大家指正。 單行文本省略 showImg(https://segme...

    paulquei 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<