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

最新推荐文章于 2023-04-20 20:34:43 发布

原创最新推荐文章于 2023-04-20 20:34:43 发布 · 991 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #vue #-webkit-line-clamp

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

15 篇文章

订阅专栏

webpack

3 篇文章

订阅专栏

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

安装依赖这个依赖：

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

1567

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

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

weixin_43907110的博客

06-18

397

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

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

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

10-17

1306

在项目中要实现多行省略，-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...

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

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

08-20

3969

-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

2184

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

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

书读百遍，其义自见

09-09

3696

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

指定展示文字的行数超出隐藏显示省略号（-webkit-line-clamp）

swagLi的博客

10-14

828

一、简单介绍一下用到的css属性 -webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其它的WebKit属性。常见结合属性： display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient:vertical 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。二、通过...

-webkit-line-clamp: 1

05-28

好的，用户想了解-webkit-line-clamp:1的作用和用法。首先，我需要根据提供的引用资料整理相关信息。记得引用中提到，这个属性需要配合display: -webkit-box和-webkit-box-orient: vertical使用。用户之前的问题中...

overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; 在vue中使用以上代码实现展示框，只展示两行，多余的文字以...的形式

04-29

另外，用户可能还需要考虑兼容性问题，因为-webkit-line-clamp是WebKit特有的，可能在Firefox或IE中不生效。是否需要提供备选方案？比如限制最大高度，或者使用JavaScript后备方法？此外，用户可能在移动端或响应...

The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines.什么意思

最新发布

07-22

- **打包后失效问题**：在某些前端框架（如 Vue）中，打包工具可能会对 CSS 进行优化，导致 `-webkit-line-clamp` 属性失效。为了解决这个问题，需要确保打包配置保留了这些非标准属性[^3]。 ### 示例以下是一个...

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

关中刀客在青岛

04-10

2890

在基于-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

3422

在项目中要实现多行省略，会使用-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

1502

找到./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

1006

多行省略，可以使用-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

700

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

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

weixin_30599769的博客

09-27

197

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

line-clamp控制行数失效

qq_44146057的博客

04-20

784

行数没有起作用搞定

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

王建忠的博客

09-15

2542

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

-webkit-line-clamp 学习

ISaiSai的专栏

08-27

3673

不需要指定整个块元素的高度，高度会被自动设置为两行的高度（指定后反而会导致超出元素显示）不需要指定 text-overflow:ellipsis;(就是点点点且不可修改)