在上一篇文章小div布局之卡片堆疊（card-stacking）中有多行文字溢出省略的效果，這篇文章就對這種效果（包括單行文字溢出省略）的實現做個簡單的記錄，以防自己忘記。具體來說，就是要實現這種文字排布效果。

?html代碼如下：

1 <div class="container"> 2 <div class="box"> 3 <div class="box-content"> 4 <h5 class="box-content-title">A公司</h5> 5 <div class="box-content-desc singleline">A公司是B公司的重要戰略伙伴，致力于為C行業提供一站式 解決方案，目前處于高速發展期。公司旗下有四個事業部，業務主要涵蓋以下三個方面，2016年公司 年營業額達到100萬元。 6 </div> 7 <div class="box-content-desc multiline">A公司是B公司的重要戰略伙伴，致力于為C行業提供一站式 解決方案，目前處于高速發展期。公司旗下有四個事業部，業務主要涵蓋以下三個方面，2016年公司 年營業額達到100萬元。 8 </div> 9 <a class="box-content-link" href="javascript:void(0);">查看 >></a> 10 </div> 11 </div> 12 </div>

通用的css樣式如下：

1 .container { 2 margin: 50px auto; 3 width: 328px; 4 } 5 6 .box { 7 background: #f7f7f7; 8 } 9 10 .box-content { 11 padding: 20px; 12 } 13 14 .box-content-title { 15 margin: 0 0 20px; 16 } 17 18 .box-content-desc { 19 color: #333; 20 font-size: 14px; 21 line-height: 1.5; 22 margin-bottom: 10px; 23 overflow: hidden; 24 } 25 26 .box-content-link { 27 color: #006ec8; 28 font-size: 14px; 29 text-decoration: none; 30 }

注意上面的?overflow: hidden;?要保留。

單行文字溢出省略：

1 .singleline{ 2 text-overflow: ellipsis; 3 white-space: nowrap; 4 }

?text-overflow屬性規定了如何顯示溢出的文字內容，它的屬性值可以是elipsis(...)、clip(截斷)、自定義的字符串，我在chrome試了下，發現自定義字符串不好用。

再看多行文字溢出省略：

1 .multiline { 2 display: -webkit-box; 3 text-overflow: ellipsis;; 4 -webkit-box-orient: vertical; 5 -webkit-line-clamp: 4; 6 }

可以看到這里用到了不規范的css寫法，即，帶webkit前綴的寫法（webkit內核瀏覽器私有屬性），還有就是用到了一些過時的寫法，

display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;

這里就不多解釋了(其實是解釋不明白)，多行省略的方法不太好。以后再研究其他比較好的方法吧。

?

ps: 剛看到這篇文章多行文本溢出顯示省略號(…)全攻略，講了下比較靠譜的方法。汗呀，這才是專業的前端～

?

參考：

text-overflow

box-orient

line-clamp

總結

以上是生活随笔為你收集整理的CSS实现单行与多行文字省略（truncation）的全部內容，希望文章能夠幫你解決所遇到的問題。

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