單行省略

white-space: nowrap; text-overflow: ellipsis; overflow: hidden; word-break: break-all;

多行省略

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

我們需要在需要超出加省略號的標簽上加一個行內樣式： <p className="right-margin-12 color-8 author-intro" style={{"WebkitBoxOrient": "vertical"}}>{news.pubInfo.introduction}</p>

-webkit-line-clamp：為2，是兩行省略，可修改；
注：一定要定義寬度，不然無效

總結

以上是生活随笔為你收集整理的css React 单行省略和多行省略的全部內容，希望文章能夠幫你解決所遇到的問題。

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