line-clamp沒法生效的解決方案

若是你在網上找了有關 line-clamp 沒法生效而沒有收穫的，但願這篇文章能幫到你

---

在近一段時間工做中，遇到了一個需求

一個簡單的item製做
當中有超出兩行文字省略且顯示省略號

筆主仍是實習萌新，記得本身之前寫相似效果的是單行，代碼以下

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

那麼多行換行，在MDN和搜索引擎後探究一番
得出了須要調用如下CSS樣式

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

參考連接 MDN -webkit-line-clamp
做者描述？Line Clampin’ (Truncating Multiple Line Text)

在去掉white-space屬性後添加查到得CSS樣式，就能獲得上述效果，網上給的答案大概是這個意思....

固然，若是是這麼一路順風也就沒有今天的文章了

如運行結果所示，彷佛咱們的CSS樣式並無生效
檢查CSS樣式

看起來並沒有問題，仍是上網查閱了一番，獲得如下結果：

1.默認編譯的時候，會過濾 -webkit-box-orient: vertical;
以及
2.安裝依賴這個依賴：npm i -S optimize-css-assets-webpack-plugin，而且註釋掉中的一段代碼：
諸如此類....

不過本着學習態度，本身仍是嘗試調試了一下
在將 overflow 屬性註釋掉的狀況，我發現了是這種的效果

顯而易見，不是CSS不生效，而是Div內沒有換行
而沒有換行，則致使line-clamp沒有生效
因此，接下來要作的，是要將Div設置啓動換行效果

overflow-wrap: break-word;

參考資料： MDN-overflow-wrap

最終效果