css超出部分顯示省略符號具體範例程式碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css超出部分省略顯示測試</title> <style> .app { width: 400px; height: 28px; line-height: 28px; margin: 50px 0 0 50px; border: 1px solid red; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style></head><body><div class="app"> <span class="content">php中文網(php.cn)提供大量免費、原創、高清的php視頻教程,在學習的時候可以直接線上修改樣本,查看php執行效果是本站的一大特色,php從入門到精通，一站式php自學平台。</span></div></body></html>
效果如：
註：以上是實現單行文本的溢出顯示省略符號用text-overflow:ellipsis屬性，還需要加寬度width屬來相容部分瀏覽。
那麼單行知道如何操作，多行就簡單了。多行的實現方法主要是以下代碼：
display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
css超出省略部分相容適用範圍：
因使用了WebKit的CSS擴充屬性，該方法適用於WebKit瀏覽器及移動端；
註：
-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數。 為了實現該效果，它需要組合其他的WebKit屬性。常見結合屬性：
display: -webkit-box; 必須結合的屬性 ，將對象作為Auto Scaling盒子模型顯示 。
-webkit-box-orient 必須結合的屬性 ，設定或檢索伸縮盒對象的子項目的相片順序 。
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
