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

最终效果