react实现多行文本超出加省略号

gougoujiang 发布于2019-04-23 13:28 / 2724人阅读

摘要：根据该文章方法，放在项目中发现并不能实现，仔细观察发现原来解析出来的样式中没有了这个样式所以我们需要在需要超出加省略号的标签上加一个行内样式然后即可实现。

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里的多行文本

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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