-webkit-line-clamp vue打包后不起作用

最新推荐文章于 2025-04-29 11:35:54 发布

冒烟筒

最新推荐文章于 2025-04-29 11:35:54 发布

阅读量972

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue.js webpack 文章标签： webpack vue -webkit-line-clamp

本文链接：https://blog.youkuaiyun.com/Smokestack/article/details/88142584

Vue.js 同时被 2 个专栏收录

15 篇文章

订阅专栏

webpack

3 篇文章

订阅专栏

本文介绍如何使用optimize-css-assets-webpack-plugin优化Webpack的CSS打包过程。通过安装依赖并调整webpack.prod.conf.js配置，实现更高效的CSS资源处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装依赖这个依赖：

npm i -S optimize-css-assets-webpack-plugin

注释掉webpack.prod.conf.js中下面这段代码代码：

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

冒烟筒

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue中打包后-webkit-box-orient: vertical消失（超出省略号失效）

Wangdr的博客

06-20

1529

之前写代码的时候遇到一个问题，就是用了下面这段css代码来让文字超出范围隐藏并显示省略号。 overflow:hidden;/*超出隐藏*/ text-overflow:ellipsis;/*文本溢出时显示省略标记*/ display:-webkit-box;/*设置弹性盒模型*/ -webkit-line-clamp:1;/*文本占的行数,如果要设置2行加...则设置为2*/ -webkit-b...

vue 多行超出显示省略号打包后-webkit-box-orient:vertical属性被移除导致失效

qq_29236119的博客

03-22

268

1、在vue项目中有时候会有固定多少行超出显示点点的需求，实现代码如下： .info{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } 2、测试环境正常，但是build打包之后就没有显示点点了，后来发现-webkit-box-orient:vertical被移除了，导致原因

参与评论您还未登录，请先登录后发表或查看评论

--webkit-line-clamp、-webkit-box-orient打包之后不起作用

weixin_43907110的博客

06-18

350

不生效原因：webpack打包的时候会将其忽略，如果使用了postCSS这个插件，打包时候会被去掉的，因为这个属性不是规范。–webkit-line-clamp、-webkit-box-orient打包之后不起作用。

vue打包项目后使用-webkit-line-clamp: 2;这个属性不生效？

10-17

1286

在项目中要实现多行省略，-webkit-line-clamp: 2;打包后不生效，使用下面的方法： 1 word-break: break-all; 2 3 text-overflow: ellipsis; 4 5 display: -webkit-box; 6 7 -webkit-box-orient: vertical; 8 9 -we...

前端设置三行文本省略号，失效为什么？

最新发布

m0_69301850的博客

04-29

1054

这里是需要截断的长文本，超过三行时会显示省略号...（测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字）-- 关键：min-width: 0 修复截断 -->/* 行高（确保 3 行 = 1.5 × 3 = 4.5em） *//* 最大高度 = 行高 × 行数（可选） *//* 超出部分显示省略号 */-webkit-line-clamp: 3;/* 限制为 3 行 *//* 隐藏溢出内容 */-webkit-box-orient: vertical;/* 垂直排列 */

-webkit-line-clamp属性在IE上不生效的问题

诸葛韩信--一个前往前端不归路的浪子

08-20

3902

-webkit-line-clamp本身不是一个正式的css属性，它目前适用于webkit为内核的浏览器。所以，当我们需要保存两行字符，多出的部分用“…”替代的话，那么IE上市不会成功的。正常状态是这样：而在IE浏览器上面是显示这样的：解决的代码如下： .content { font-size: 14px; color: #4A4A4A; overflow: hidden; line-height: 26px; position: relative; height: 45

vue中使用-webkit-line-clamp、-webkit-box-orient属性，项目打包后不生效？

Allen-Ye博客

01-10

2143

在本地开发中，-webkit-box-orient就文字超出显示。。。是可以正常使用，可是把项目打包到服务器上面，这个功能就出问题，网上查资料看的说原因是：会被打包的postCSS这个插件去掉的，好像是因为这个属性不是规范。可以写在行内style里面，这样就不会被插件去掉了。经过排斥然后有以下两种解决方法解决方法：第一种直接设置css： /*！autoprefixer: off */ -webkit-box-orient: vertical; -webkit-line-clam

vue -webkit-line-clamp不生效解决

书读百遍，其义自见

09-09

3671

设置css： /*！autoprefixer: off / -webkit-box-orient: vertical; -webkit-line-clamp: 2; /！autoprefixer: on / /! autoprefixer: on / 放自己的css代码 /! autoprefixer: off */ 注：前面有！

uniapp中为什么-webkit-box-orient:vertical; -webkit-line-clamp:3这两行代码报错

05-25

这两行CSS代码是用于控制文本溢出的样式。但是在uni-app中，由于其是基于Vue开发的跨平台框架，使用的是weex...-webkit-line-clamp: 3; ``` 这段代码可以实现与你提到的代码相同的效果，同时也能在uni-app中正常使用。

06-01

- `:style="{'-webkit-line-clamp': row, elsColor }"`：为组件添加一个动态绑定的样式对象，其中包含了两个属性： - `-webkit-line-clamp`：用于设置文本的行数。 - `elsColor`：自定义样式属性，用于设置文本...

uniapp中使用-webkit-box-orient: vertical; -webkit-line-clamp: 3;这两行代码报错:This could be due to syntax errors or importing non-existent modules. (see errors above)

05-25

这两行代码是 CSS3 的属性，应该放在 CSS 样式中，而不是在 JavaScript 或者 Vue 模板中使用。如果你在 Vue 模板中... -webkit-line-clamp: 3; } ``` 然后在需要使用这两行代码的地方添加 `class="clamp"` 即可。

css中限制行数( -webkit-line-clamp)出现三个点在打包时失效的解决方案

关中刀客在青岛

04-10

2740

在基于-webkit内核的浏览器中，多行文本限制行数，比如超过2行时，第二行结尾用三个点表示，实现如下： h4{ display: -webkit-box; overflow: hidden; -webkit-line-clamp:2; -webkit-box-orient: vertical; } 可以看出，后面两行有-webkit 前缀，就是这个属...

vue运行,打包项目后css中使用的-webkit-line-clamp: 2这个属性不生效

weixin_40716786的博客

01-16

3381

在项目中要实现多行省略，会使用-webkit-line-clamp这个属性，-webkit-line-clamp: 2;代码如下 p{ word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflo...

vue build 之后页面 -webkit-line-clamp: 2; -webkit-box-orient: vertical;失效不起作用

晏紫苏_cc的博客

10-29

1490

找到./build/webpack.prod.config.js 文件找到下面的这段代码注释掉重新打包即可 // -webkit-line-clamp、-webkit-box-orient vue打包后不起作用 注释下面这段代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSo...

Vue项目打包后css中的-webkit-line-clamp这个属性失效

hu104160112的博客

12-29

969

多行省略，可以使用-webkit-line-clamp属性，打包后却失效了 .htcon { margin-top: 5px; font-size: 13px; word-break: break-all; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; over

css visibility 导致 -webkit-box-orient/-webkit-line-clamp多行显示失效

cannon9527的博客

03-02

671

记一个开发中遇到的样式问题如图显示多行显示没有按照正常显示“…” 排查结果：因为这个下拉模块中因为动画问题使用了visibility :hidden来替换了display:none，而在visibility:hidden下节点的text变动，当切换到visibility：visible时是不会渲染"…"的; 修改结果： 1、在使用visibility :hidden的情况下避免使用-webk...

用vue脚手架搭建的项目后期上线后-webkit-box-orient: vertical不显示的问题

weixin_30599769的博客

09-27

183

目前这个问题我也是第一次碰到，也只是在vue打包项目上线的时候遇到的，其它地方暂时没有实践。做页面效果的时候，我们经常会遇到文本溢出用“...”代替的情况，下面这种样式是我的代码（可能和你们的大同小异）：这里是最多显示两行，第二行溢出隐藏用“...”代替这样写完之后在本地测试是完全OK的，但是npm run build之后就不显示-webkit-box-orient: vertical...

line-clamp控制行数失效

qq_44146057的博客

04-20

748

行数没有起作用搞定

-webkit-line-clamp 控制文字显示多行，多出部分显示省略号

王建忠的博客

09-15

2484

-webkit-line-clamp是一个私有的、不在规范内的css属性，当这样使用的时候：display: -webkit-box; // 需配合的盒子属性 -webkit-line-clamp: 2; // 多少行后再多出时显示... -webkit-box-orient: vertical; // 默认水平，这里设置垂直可以达到这样的效果：当然，加上固定height和overflow:hi