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

最终效果