vue项目text-overflow:ellipsis;在生产环境上不显示...的问题

首先科普下文本溢出显示...的代码：

单行文本溢出：{overflow: hidden; text-overflow:ellipsis;white-space:nowrap;width:150px}

多行文本溢出：{overflow: hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:@line(行数)}

然后问题来了：测试环境上文本溢出正常显示...，正式环境环境则溢出隐藏，不显示...

经排查：发现是打正式包时webpack没有编译这个属性：-webkit-box-orient:vertical;

问题找到了，接下来跟踪打包，找出了optimize-css-assets-webpack-plugin这个导致问题的插件

注释掉webpack.prod.conf.js中下面的代码

new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),

问题解决了，但是css也没有压缩，并且原因也不明

于是请教度娘，找到了另一个解决办法，在-webkit-box-orient:vertical;位置添加如下代码, 关闭autoprefixer的自动删除功能即可

{/*! autoprefixer: off */-webkit-box-orient:vertical;/*! autoprefixer: on */
}

tip：如果使用的css前面不需要！,如果和我一样用了scss或less, 前面的！不能少，很多方案提供的答案前面都没有！, 导致我试过一直无效

转载于:https://www.cnblogs.com/wengXiaofeng/p/9518334.html

vue项目text-overflow:ellipsis;在生产环境上不显示...的问题相关推荐

vue配置开发、测试、生产环境（proxy中获取process.env.NODE_ENV）
先是看了这个文章写的如何npm run build 的时候自动配置地址参考文章"vue配置开发.测试.生产环境(不同环境,不同命令)_Amy_cloud的博客-CSDN博客_vue生产环境 ...
项目实战典型案例11——生产环境重大事故
生产环境重大事故一:背景介绍二:思路&方案对于问题1-4的思路&方案对于问题5的思路&方案四:总结一:背景介绍对于arpro这个项目.生产环境上布置了两套环境,一 ...
vue 项目打包后浏览器 F12 在source 下不显示 webpack 包
vue 项目打包后浏览器 F12 在source 下不显示 webpack 包,度娘上好多说的是在 vue.config.js 配置 productionSourceMap: false 即可,然 ...
Vue项目中遇到了大文件分片上传的问题
Vue项目中遇到了大文件分片上传的问题,之前用过webuploader,索性就把Vue2.0与webuploader结合起来使用,封装了一个vue的上传组件,使用起来也比较舒爽. 上传就上传吧,为什么 ...
linux 正则查找email_Linux生产环境上，最常用的一套“Sed“技巧
sed命令应用广泛,使用简单,是快速文本处理的利器.它其实没多少技巧,背诵.使用是最合适的学习渠道,属于硬技能.但它又很复杂,因为高级功能太多.本篇不去关注sed的高级功能,仅对常用的一些操作,进行说 ...
[react] 在React中如果去除生产环境上的sourcemap？
[react] 在React中如果去除生产环境上的sourcemap? GENERATE_SOURCEMAP=false react-scripts build If you use the Crea ...
【ketlle】本地开发kitlle job提交至linux生产环境上执行流程
[ketlle]本地开发kitlle job提交至linux生产环境上执行前言操作步骤后记前言因为kettle提供可视化界面,所以我们在本地开发的时候拖拽开发十分便捷,开发完成后,我们需要丢 ...
vue项目在vscode中编译eslint报错没显示红色波浪线提示
vue项目在vscode中编译eslint报错没显示红色波浪线提示. 如下图所示: 下图是预期效果: 不符合Eslint校验规则的代码位置都能展示出来,这样一目了然.能帮助我们迅速找到报错的位置. 然 ...
vue项目部署到服务器后浏览器标签上的小图标消失不见
背景: 最近在开发项目过程中发现一个问题,项目部署到服务器后在浏览器打开,会发现浏览器标签上的小图标消失不见了.百度查找问题,网上给出了许多解决的方案,例如清除浏览器缓存.把图标的相对路径改成绝对路径 ...
vue服务端渲染——项目搭建、开发、生产环境的部署、浏览渲染、SEO优化
几个月前,公司要求(服务端渲染)--用vue-ssr做了个服务端渲染,从起搭建.开发.部署.浏览器渲染到优化,希望对有需要的小伙伴有帮助,若是有不足之处,望指出,一起讨论学习.--几个月过去了,公司又 ...

vue项目text-overflow:ellipsis;在生产环境上不显示...的问题

vue项目text-overflow:ellipsis;在生产环境上不显示...的问题相关推荐

最新文章

热门文章