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

简介: 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

我将其注释掉然后再次打包运行,结果效果达到了。
最终运行

我的填坑之路算是告一段落。不过这个问题以后我再详细研究一下其原理写一篇关联的文章。

相关文章
|
1天前
|
前端开发
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
css 图标和文字对齐 —— 垂直居中对齐,任意位置对齐
9 2
|
1天前
|
JavaScript 内存技术
Vue动画——使用最新版Animate.css教程
Vue动画——使用最新版Animate.css教程
5 0
|
5天前
|
前端开发 JavaScript
|
8天前
|
JavaScript
vue点击按钮复制文字到粘贴板
vue点击按钮复制文字到粘贴板
10 0
|
14天前
|
前端开发 容器
用CSS将文字超出部分变为省略号的方法
用CSS将文字超出部分变为省略号的方法
13 0
|
28天前
|
前端开发 JavaScript
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
保存网页中的css和js文件,网站保存,复制网站不可复制的文字,网站抠图
15 0
|
2月前
|
存储 JavaScript 前端开发
笔.COOL,一个功能完备、使用便捷的在线HTML/CSS/JS以及Vue编辑器和作品分享平台
笔.COOL是一个新兴的在线 HTML/CSS/JS 及 Vue 编辑器,提供实时预览和云端存储功能。用户可以随时随地编写和保存代码,同时分享作品给他人预览和学习。它也是一个实用的 BUG 复现工具,支持嵌入编辑器到博客,促进代码交流。社区活跃,适合开发者展示作品、获取灵感和学习。
|
2月前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
24 0
|
2月前
|
前端开发 算法
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
【css炫酷动画】让面试官眼前一亮的故障风格文字动画,3年Web前端开发工程师面试经验分享
|
2月前
|
JSON 前端开发 JavaScript
CSS模块postcss-modules,在jsx中实现vue里的scoped
CSS模块postcss-modules,在jsx中实现vue里的scoped