当前位置： 移动技术网 > IT编程>网页制作>CSS > react实现多行文本超出加省略号

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

2018年08月15日  | 移动技术网IT编程  | 我要评论

红豆杉的药用价值,妖气美丽男人,漂亮的姑娘就要嫁人啦铃声

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>

然后即可实现。

 

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网