最近的项目里面有一段文字是需要是文字显示其中两行,多余的显示成 ..., 方法什么的就不多说了,网上很多,大家一百度就都出来了。
说说问题。 我按照网上说的写了一段,但是在vue中本地运行,样式就是好好的,但是,打包之后在运行就会出问题。下面是具体情况:
本地运行:
打包之后服务器运行:
是不是觉得很诧异。
为什么会这样。我便开始查找原因。比较代码有什么区别:
比较之下发现缺少了红框里一行,加上之后就会正常了。我兴奋的以为我找到原因了,结果,回到代码里发现那行代码就确确实实的在那里。
这时我就恍惚了。丢那一行。着实浪费不少功夫。
后来思考了一下。 感觉我第一步应该是可以排除和vue的关系,因为别的都加载,不可能是打包时只丢下这一行。
第二步我看看图片对比,发现文字多了,那是不是高度也出问题了
于是我看了代码:
于是我将height 的属性值从auto 改成了 1 rem
然后文字效果就回来了,
你一定能疑惑,这为什么对了,但是省略号呢哪去了o(╥﹏╥)o,我也疑惑啊。
后来发现原来第一步思考就出错了,确实和vue使用webpack 有关。于是我在webpack.prod.conf.js里找到css的打包策略,也就是如下图这段
我将其注释掉然后再次打包运行,结果效果达到了。
我的填坑之路算是告一段落。不过这个问题以后我再详细研究一下其原理写一篇关联的文章。