實現(xiàn)單行文本溢出的CSS

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

實現(xiàn)多行文本溢出的CSS

display: -webkit-box; 
-webkit-line-clamp:3;
overflow: hidden; 
-webkit-box-orient: vertical;
text-overflow: ellipsis;

但是！
實現(xiàn)多行文本溢出顯示省略號的時候webpack不編譯-webkit-box-orient: vertical;這就很坑爹了!
但是！我們有解決方法的呀！??！

/* autoprefixer: off */
 -webkit-box-orient: vertical; // 參考 https://github.com/postcss/autoprefixer/issues/776
/* autoprefixer: on */

完美解決！
今天我發(fā)現(xiàn)這種解決方法的一個問題，就是項目上線時會壓縮代碼，會清除掉注釋以及多余的空格空行，所以這個方法就不行了，所以我將-webkit-box-orient: vertical;放到行內(nèi)了。
多行文本溢出還有一種解決方法

.box{
  position: relative; 
  line-height: 20px; 
  max-height: 40px;
  overflow: hidden; 
  width: 200px;}
.box::after{
  content: "..."; 
  position: absolute;
  bottom: 0; 
  right: 0; 
  padding-left: 40px;
  background: -webkit-linear-gradient(left, transparent, #fff 55%);
  background: -o-linear-gradient(right, transparent, #fff 55%);
  background: -moz-linear-gradient(right, transparent, #fff 55%);
  background: linear-gradient(to right, transparent, #fff 55%);
}

該方法適用范圍廣，但文字未超出行的情況下也會出現(xiàn)省略號,可結(jié)合js優(yōu)化該方法。
注意：

• 將height設(shè)置為line-height的整數(shù)倍，防止超出的文字露出。
• 給p::after添加漸變背景可避免文字只顯示一半。
• 由于ie6-7不顯示content內(nèi)容，所以要添加標簽兼容ie6-7（如：<span>…<span/>）；兼容ie8需要將::after替換成:after。