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

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

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

相关文章
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
37 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
3月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
56 1
简单几行代码CSS实现网页自动打文字效果
|
1月前
|
Web App开发 前端开发 iOS开发
|
3月前
|
移动开发 前端开发 HTML5
css实现涂绘文字的效果
如何使用HTML5和CSS3创建一个简单的文字涂抹动画效果。通过设置一个相对定位的父级div包含文本,并在其上使用绝对定位的伪元素与之重叠,实现动画效果。关键在于控制伪元素的宽度从0%到100%的变化过程,同时利用`overflow: hidden`和`white-space: nowrap`确保文本按预期显示。光标效果则通过添加右边界来模拟。整体代码简洁明了,便于理解和实践。
36 1
css实现涂绘文字的效果
|
2月前
|
JavaScript 前端开发
react Or vue中引入animate.css
本文介绍了如何在React或Vue项目中引入animate.css库来使用动画效果,包括通过npm安装或在线链接引入,并展示了如何在React组件和Vue路由过渡中使用动画类。
57 0
|
3月前
|
JavaScript
Vue3文字滚动(TextScroll)
这是一个可定制的文字滚动组件,支持水平和垂直滚动。主要属性包括滚动文字数组 `scrollText`、是否启用单条文字滚动 `single`、滚动区域宽高 `width` 和 `height`、滚动区域和文字样式 `boardStyle` 和 `textStyle`、滚动条数 `amount`、间距 `gap`、动画间隔 `interval` 和 `step`、以及垂直滚动时间间隔 `verticalInterval`。组件内置多种样式调整功能,并提供在线预览示例。
105 0
Vue3文字滚动(TextScroll)
|
3月前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
90 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
3月前
|
JavaScript
如何通过点击商品的信息(图片或者文字)跳转到更加详细的商品信息介绍(前后端分离之Vue实现)
该博客文章介绍了如何在Vue 2框架下实现前后端分离的商品信息展示和详情页跳转,包括排序筛选、详情展示、加入购物车和分享功能。
如何通过点击商品的信息(图片或者文字)跳转到更加详细的商品信息介绍(前后端分离之Vue实现)
|
3月前
|
前端开发 JavaScript
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
本文分享了如何使用Vue和CSS实现一个汉堡图标在点击时过渡为叉号图标的动画效果,并提供了详细的实现代码和效果演示。
70 0
使用Vue+CSS实现汉堡图标过渡为叉号图标,有点意思
|
3月前
|
前端开发
CSS流光文字效果:打造网页上的霓虹灯效果!
CSS流光文字效果:打造网页上的霓虹灯效果!