簡單介紹一下單行超出顯示省略號
text-overflow:ellipsis;
white-space: nowrap;
overflow: hidden;
overflow: hidden;溢位隱藏
white-space: nowrap;文字不能轉行
text-overflow:ellipsis;隱藏的部分用...表示
大招來了，多行超出顯示省略號
overflow: hidden;首先是溢位隱藏，不可或缺
display: -webkit-box;彈性盒模型顯示
-webkit-box-orient: vertical;盒模型元素的排列方式
-webkit-line-clamp: 3;顯示行數
text-overflow: ellipsis;
但是問題來了，本地執行是成功的，但是webpack編譯之後，奇怪的事情的發生了，
-webkit-box-orient: vertical;這句css消失了，就這樣莫名其妙的消失了。
找問題吧，
網上有兩種解決方法：
1.使用
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
替換-webkit-box-orient: vertical;
重新編譯，發現還是還是消失了，我也不太清楚別人為什麼可以，反正我的不可以，
然後替換成（多了個 ! ）/*!
autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
再次編譯，總算出現了，成功。
2.
new optimizecssplugin( }
: }),
這個外掛程式是做css壓縮的，也就是說，你要是刪除了這個外掛程式，你的css就不會被壓縮。
以上兩種方法親測可用，不過，還是沒有太了解其中的原理。
不過，上面介紹的多行超出顯示省略號，有相容性問題，這個屬性只適合webkit瀏覽器或移動端（絕大部分是webkit核心的）瀏覽器，比較好的方式是設定相對定位容器的高度，用包含省略號（...）的元素模擬實現：
.blog-content
.blog-content:after
CSS文字超出顯示省略號
white space nowrap overflow hidden text overflow ellipsis 但是因為兩個行內元素例如span一起的時候會出現一些間距，為了去掉這些間距我們可以給元素新增font size 0 但這樣做的話，會發現省略號消失了，但不新增font size 0 又...
css實現超出顯示省略號
css實現 省略樣式單行 text2 瓜兮兮邀請你一起玩遊戲，請在5分鐘內確認 css部分 text2 css實現 省略樣式多行 多行超出省略 width 400rpx display webkit box overflow hidden white space normal important t...
css 多行溢位顯示省略號
記錄下看到的乙個css巧用，非常 有意思。1 常規的處理方法張燈結綵龍獅鬧，團圓歡樂一家好，家庭事業火紅照，友情親情繞，平安健康都來到，真情滋潤好運交，元宵節的吉祥一路拋，灑下前程更 2 利用偽元素巧妙解決張燈結綵龍獅鬧，團圓歡樂一家好，家庭事業火紅照，友情親情繞，平安健康都來到，真情滋潤好運交，元...