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

這篇文章就對這種效果（包括單行文字溢出省略）的實現做個簡單的記錄，以防自己忘記。具體來說，就是要實現這種文字排布效果。

html代碼如下：

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

通用的css樣式如下：

.container {  margin: 50px auto;  width: 328px;}.box {  background: #f7f7f7;}.box-content {  padding: 20px;}.box-content-title {  margin: 0 0 20px;}.box-content-desc {  color: #333;  font-size: 14px;  line-height: 1.5;  margin-bottom: 10px;  overflow: hidden;}.box-content-link {  color: #006ec8;  font-size: 14px;  text-decoration: none;}

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

單行文字溢出省略：

1singleline{

2 text-overflow: ellipsis;

3 white-space: nowrap;

4 }

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

再看多行文字溢出省略：

.multiline {  display: -webkit-box;  text-overflow: ellipsis;;  -webkit-box-orient: vertical;  -webkit-line-clamp: 4;}

可以看到這裡用到了不規範的css寫法，即，帶webkit首碼的寫法（webkit核心瀏覽器私人屬性），還有就是用到了一些過時的寫法，

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

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

