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>

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

然后即可实现。

 

相关文章:

  • 2021-10-02
  • 2021-09-28
  • 2021-09-28
  • 2021-12-15
  • 2021-09-28
  • 2021-12-22
  • 2022-01-02
猜你喜欢
  • 2021-09-28
  • 2021-10-02
  • 2022-12-23
  • 2021-10-02
  • 2021-12-11
  • 2021-10-20
  • 2021-10-12
相关资源
相似解决方案