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

Posted 2022-01-04 pengzhao-mr

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于React中多行文本省略不生效原因的主要内容，如果未能解决你的问题，请参考以下文章