react實(shí)現(xiàn)多行文本超出加省略號(hào)

gougoujiang 發(fā)布于2019-04-23 13:28 / 2873人閱讀

摘要：根據(jù)該文章方法，放在項(xiàng)目中發(fā)現(xiàn)并不能實(shí)現(xiàn)，仔細(xì)觀察發(fā)現(xiàn)原來(lái)解析出來(lái)的樣式中沒(méi)有了這個(gè)樣式所以我們需要在需要超出加省略號(hào)的標(biāo)簽上加一個(gè)行內(nèi)樣式然后即可實(shí)現(xiàn)。

http://www.css88.com/archives/5206

overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

根據(jù)該文章方法，放在react項(xiàng)目中發(fā)現(xiàn)并不能實(shí)現(xiàn)，仔細(xì)觀察發(fā)現(xiàn)原來(lái)react解析出來(lái)的css樣式中沒(méi)有了這個(gè)樣式：

-webkit-box-orient: vertical;


所以我們需要在需要超出加省略號(hào)的標(biāo)簽上加一個(gè)行內(nèi)樣式：

<p className="right-margin-12 color-8 author-intro" style={{"WebkitBoxOrient": "vertical"}}>{news.pubInfo.introduction}p>

然后即可實(shí)現(xiàn)。

GPU云服務(wù)器云服務(wù)器隱藏超出文本 php文本溢出省略讀取多行文本 html里的多行文本

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1923.html

相關(guān)文章

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

摘要：如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都知道用屬性來(lái)，當(dāng)然還需要加寬度屬來(lái)兼容部分瀏覽。接下來(lái)重點(diǎn)說(shuō)一說(shuō)多行文本溢出顯示省略號(hào)，如下。如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都知道用text-overflow:ellipsis屬性來(lái)，當(dāng)然還需要加寬度width屬來(lái)兼容部分瀏覽。實(shí)現(xiàn)方法： overflow: hidden; text-overflow:ellipsis; whit...

番茄西紅柿 2019-04-23 14:39 評(píng)論0 收藏0
超過(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 2019-08-30 15:55 評(píng)論0 收藏0
超過(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{...

Flink_China 2019-08-02 14:08 評(píng)論0 收藏0
css文本超出隱藏顯示省略號(hào)

摘要：如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都知道用屬性來(lái)，當(dāng)然還需要加寬度屬來(lái)兼容部分瀏覽。接下來(lái)重點(diǎn)說(shuō)一說(shuō)多行文本溢出顯示省略號(hào)，如下。給添加漸變背景可避免文字只顯示一半。p?style=width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;> ? ? 如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都...

denson 2019-04-23 11:58 評(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 2019-08-02 12:05 評(píng)論0 收藏0