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

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

摘要：根據(jù)該文章方法，放在項目中發(fā)現(xiàn)并不能實現(xiàn)，仔細觀察發(fā)現(xiàn)原來解析出來的樣式中沒有了這個樣式所以我們需要在需要超出加省略號的標簽上加一個行內(nèi)樣式然后即可實現(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項目中發(fā)現(xiàn)并不能實現(xiàn)，仔細觀察發(fā)現(xiàn)原來react解析出來的css樣式中沒有了這個樣式：

-webkit-box-orient: vertical;


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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/1923.html

相關(guān)文章

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

摘要：如果實現(xiàn)單行文本的溢出顯示省略號同學們應該都知道用屬性來，當然還需要加寬度屬來兼容部分瀏覽。接下來重點說一說多行文本溢出顯示省略號，如下。如果實現(xiàn)單行文本的溢出顯示省略號同學們應該都知道用text-overflow:ellipsis屬性來，當然還需要加寬度width屬來兼容部分瀏覽。實現(xiàn)方法： overflow: hidden; text-overflow:ellipsis; whit...

番茄西紅柿 2019-04-23 14:39 評論0 收藏0
超過固定寬度(或行數(shù))顯示...(或省略)

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

zgbgx 2019-08-30 15:55 評論0 收藏0
超過固定寬度(或行數(shù))顯示...(或省略)

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

Flink_China 2019-08-02 14:08 評論0 收藏0
css文本超出隱藏顯示省略號

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

denson 2019-04-23 11:58 評論0 收藏0
css實現(xiàn)單行、多行文本超出顯示省略號

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

wing324 2019-08-02 12:05 評論0 收藏0