代碼展示：
overflow : hidden;/*text-overflow: ellipsis; 有些樣本裡需要定義該屬性，實際可省略*/display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;
概述
-webkit-line-clamp是一個不規範的屬性（unsupported WebKit property），它沒有出現在 CSS 規範草案中。
限制在一個塊元素顯示的文本的行數。 為了實現該效果，它需要組合其他外來的WebKit屬性。常見結合屬性：
display: -webkit-box; 必須結合的屬性，將對象作為Auto Scaling盒子模型顯示 。
-webkit-box-orient 必須結合的屬性，設定或檢索伸縮盒對象的子項目的相片順序 。
text-overflow，可以用來多行文本的情況下，用省略符號“...”隱藏超出範圍的文本 。
全部代碼：
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>css3截取字串多行</title><style>.box { width: 400px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}</style></head></p> <p><body><div class="box">css3截取字串多行，css3截取字串多行，css3截取字串多行，css3截取字串多行，css3截取字串多行，</div></body></html>Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
