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

发布时间：2020-12-15 20:25:26 所属栏目：百科来源：网络整理

导读：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样式中没

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>

然后即可实现。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!