如果您一直没有发现line-clamp在线不工作的问题，希望这篇文章可以帮到您。在最近的工作中，遇到过一个简单的需求item的制作中，省略了两行以上的文字，并显示了省略号。作者还是实习生。我记得我曾经在一行中写过类似的效果。代码如下：white-space:nowrap;溢出：隐藏；文本溢出：省略号；这么多行换行，经过对MDN和搜索引擎的一番研究，发现需要调用如下CSS样式-webkit-line-clamp:2;-webkit-box-orient：垂直；显示：-webkit-box；参考链接MDN-webkit-line-clamp作者描述？LineClampin'(TruncatingMultipleLineText)在去掉white-space属性后添加找到的CSS样式，可以得到如上效果。网上给出的答案大概是这个意思。。。当然，这么顺利的话，就不会有今天这篇文章运行结果如图，看来是我们的css样式没有生效。检查CSS样式似乎没有问题。网上查了一下，结果如下：1.默认编译时，会过滤-webkit-box-orient:vertical；和2.安装依赖这个依赖：npmi-Soptimize-css-assets-webpack-plugin，并注释掉一段代码在：等等....不过本着学习的精神，还是尝试了之后调试注释掉overflow属性的情况，发现效果很明显。不是CSS不生效，而是div中没有??换行，导致line-clamp不生效。那么，接下来要做的就是设置Div启动换行效果overflow-wrap:break-word;参考：MDN-overflow-wrap最终效果
