CSS實現單行與多行文字省略（truncation）

在上一篇文章小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