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>

然后即可實現。

?

本文轉載于:猿2048?https://www.mk2048.com/blog/blog.php?id=hc2jkaa&title=react實現多行文本超出加省略號

總結

以上是生活随笔為你收集整理的react实现多行文本超出加省略号的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。