react實現多行文本超出加省略號

gougoujiang 發布于2019-04-23 13:28 / 2802人閱讀

摘要：根據該文章方法，放在項目中發現并不能實現，仔細觀察發現原來解析出來的樣式中沒有了這個樣式所以我們需要在需要超出加省略號的標簽上加一個行內樣式然后即可實現。

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

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

根據該文章方法，放在react項目中發現并不能實現，仔細觀察發現原來react解析出來的css樣式中沒有了這個樣式：

-webkit-box-orient: vertical;


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

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

然后即可實現。

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

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

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

CSS實現單行、多行文本溢出顯示省略號

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

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

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

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

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

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

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

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

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

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