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

蓓蕾心晴

发布于 2018-08-15 15:31:28

2.3K0

发布于 2018-08-15 15:31:28

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>

然后即可实现。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-08-14 ，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度