vue中多行文字,多余的文字显示成...的css失效

    最近的项目里面有一段文字是需要是文字显示其中两行，多余的显示成  ..., 方法什么的就不多说了，网上很多，大家一百度就都出来了。
说说问题。 我按照网上说的写了一段，但是在vue中本地运行，样式就是好好的，但是，打包之后在运行就会出问题。下面是具体情况：

本地运行：

本地运行

打包之后服务器运行：

打包后服务器运行
是不是觉得很诧异。
为什么会这样。我便开始查找原因。比较代码有什么区别：
image.png
image.png

    比较之下发现缺少了红框里一行，加上之后就会正常了。我兴奋的以为我找到原因了，结果，回到代码里发现那行代码就确确实实的在那里。
这时我就恍惚了。丢那一行。着实浪费不少功夫。
    后来思考了一下。 感觉我第一步应该是可以排除和vue的关系，因为别的都加载，不可能是打包时只丢下这一行。
第二步我看看图片对比，发现文字多了，那是不是高度也出问题了
于是我看了代码：

image.png

于是我将height 的属性值从auto 改成了 1 rem
然后文字效果就回来了，

改动height之后

你一定能疑惑，这为什么对了，但是省略号呢哪去了o(╥﹏╥)o，我也疑惑啊。
后来发现原来第一步思考就出错了，确实和vue使用webpack 有关。于是我在webpack.prod.conf.js里找到css的打包策略，也就是如下图这段

webpack.prod.conf.js
我将其注释掉然后再次打包运行，结果效果达到了。
最终运行
我的填坑之路算是告一段落。不过这个问题以后我再详细研究一下其原理写一篇关联的文章。