React中多行文本省略不生效原因

在普通的前端项目中,在不考虑兼容问题的时候,可以用以下代码实现:

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

但是在React项目之中不生效是因为在react编译后没有-webkit-box-orient: vertical;

解决方法是添加行内样式:

<p style={{"WebkitBoxOrient": "vertical"}}>
   React多行文本省略
</p>

 

posted @ 2019-06-11 18:09  等风来灬  阅读(536)  评论(0编辑  收藏  举报