webpack编译-webkit-box-orient: vertical 消失问题解决方案

最新推荐文章于 2022-03-03 13:32:22 发布
原创 最新推荐文章于 2022-03-03 13:32:22 发布 · 809 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个在CSS布局中遇到的问题及解决方案，通过使用特定的CSS属性解决了元素布局方向的问题。

手上的项目恰好碰到这个问题 试了很多方法 最后网上找到了解决方案

解决方案：

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

参考链接：https://github.com/postcss/autoprefixer/issues/776

bini000
关注
vue中打包后-webkit-box-orient: vertical消失（超出省略号失效）
Wangdr的博客
06-20 1577
之前写代码的时候遇到一个问题，就是用了下面这段css代码来让文字超出范围隐藏并显示省略号。 overflow:hidden;/*超出隐藏*/ text-overflow:ellipsis;/*文本溢出时显示省略标记*/ display:-webkit-box;/*设置弹性盒模型*/ -webkit-line-clamp:1;/*文本占的行数,如果要设置2行加...则设置为2*/ -webkit-b...
webpck不能编译这个属性-webkit-box-orient: vertical
jackie_bobo的博客
08-14 1015
多出指定行后，用省略号…代替。 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： - display: -webkit-box：必须结合的属性 ，将对象作为弹性伸缩盒子模型...
webpack 打包编译-webkit-box-orient: vertical 后消失
weixin_30448685的博客
03-08 217
/* autoprefixer: off */ -webkit-box-orient: vertical; // 参考 https://github.com/postcss/autoprefixer/issues/776 /* autoprefixer: on */ 打包时必须使用这种方法打包，否则打包后-webkit-box-orient: vertical ...
解决webpack打包后-webkit-box-orient: vertical ;消失问题
weixin_30598225的博客
11-26 221
在前段展示中，一个很常见的问题 就是多行文本溢出显示“...”,再是对兼容性要求不算太高的时候 使用box布局是一种非常实用的方法 .ellipsis-2{ overflow hidden text-overflow ellipsis display -webkit-box -webkit-line-clamp 2 -webkit-box-orient vert...
-webkit-box-orient: vertical;在webpack 打包过程中会被清理掉
猿小龙
03-26 338
第一种方法： 在css红添加注释命令; /* autoprefixer: off */ 跳过webpack 打包 -webkit-box-orient: vertical; /* autoprefixer: on */ 第二种方法：修改配置文件； 1.找到配置文件/build/webpack.prod.conf.js文件，注释掉一下代码 new OptimizeCSSP...
vue中-webkit-box-orient：vertical打包放到线上不显示
weixin_30799995的博客
06-14 186
解决方法： 　　1、找到build文件夹 下的webpack.prod.conf.js文件 2、注释new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: tru...
vue-cli 背景图片、-webkit-box-orient: vertical打包后丢失问题
panling_dml的博客
07-06 485
背景图片需更改build/utils.js文件，添加publicPath: '../../'if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader' ...
-webkit-box-orient: vertical的含义是什么
03-12
好的，我现在需要回答用户关于CSS属性`-webkit-box-orient: vertical`的问题。首先，我需要理解这个属性的基本含义和作用。根据用户提供的引用资料，这个属性通常与多行文本截断相关，比如显示两行文本，超出部分用...
.news-list-secondary { width: 448rpx; display: -webkit-box; /* 启用弹性盒模型 */ -webkit-box-orient: vertical; /* 文本垂直排列 */ overflow: hidden; /* 溢出内容隐藏 */ text-overflow: ellipsis; /* 超出部分显示省略号 */ -webkit-line-clamp: 2; }只显示一行
09-10
在webpack等构建工具中，可能会因为优化而移除`-webkit-box-orient: vertical;`，因为它是带有前缀的属性。我们可以采用以下两种方式之一： a) 使用行内样式（不推荐，但可测试） b) 使用注释关闭autoprefixer的...
-webkit-line-clamp: 2;报错还定义标准属性“line-clamp”以实现兼容性less(vendorPrefix) The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines. Syntax: none | <integer>
03-26
这个属性用于限制在一个块元素显示的文本行数，通常配合display: -webkit-box和-webkit-box-orient: vertical使用。不过，它只适用于WebKit内核的浏览器，比如Chrome和Safari，其他浏览器可能不支持，这就是兼容性...
[编译scss/sass] 20:14:46.813 "message": "no mixin named text-ellipsis",
最新发布
09-10
-webkit-box-orient: vertical; overflow: hidden; } ``` ### 检查混入文件引入 如果 `text-ellipsis` 混入定义在单独的文件中，需要确保该文件已被正确引入。例如，在 `index.scss` 中使用 `text-ellipsis` 混入...
基于以太坊demo webpack-box
12-12
基于以太坊的小demo,源码地址为https://truffleframework.org/boxes
CSS: webpack打包后-webkit-box-orient: vertical;消失了
weixin_39015132的博客
08-03 1945
前言 多行文本后隐藏的less代码： .title{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; flex-direction: column; } v...
前端项目解决webpack打包后-webkit-box-orient: vertical ;消失问题
泥猴桃的博客
12-06 712
前端写样式的时候经常会用到文字溢出隐藏变省略号的样式。 使用-webkit-box-orient: vertical;样式，但是打包上线后，发现样式丢失 方法1： 加上注释命令，让autoprefixer编译的时候关闭对这行代码的转换。 display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; ...
webpack3不支持-webkit-box-orient:vertical
qq_34486420的博客
04-16 1379
问题：css3样式超出两行隐藏在webpack3不起效果，-webkit-box-orient:vertical不会被编译解决办法：原因：autoprefixer不仅会帮你加-webkit-之类的prefixer，还会删除css中的样式，用注释包裹就不会被删除...
解决webpack打包后-webkit-box-orient: vertical;失效问题
haolijuan520的博客
12-03 673
在展示页面效果的时候，尤其是移动端上的界面，我们经常会有需求，最多展示两行，其余用“…”代替。 于是，就产生了下面的样式： .div { text-align: left; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webki...
解决webpack打包后-webkit-box-orient被移除问题
screaming_color的博客
07-05 4352
[产生原因] : autoprefixer自动移除老式过时的代码 [关于autoprefixer] : https://www.npmjs.com/package/autoprefixer [解决] 方法一: 添加注释关闭autoprefixer,但是若果有清除注释的插件,请将该插件设为false,否则不生效 /* autoprefixer: off */ -webkit-box-ori...
-webkit-box-orient: vertical 打包后丢失的问题
weixin_30772105的博客
03-13 395
以上代码是scss中书写的超出N行省略的css代码。 正常的，当我们通过css来控制超出N行隐藏的时候，一般css会这样来写， overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; 这几行代...
Echarts legend属性使用
热门推荐
m0_67394006的博客
03-03 1万+
Echarts的legend属性是对图例组件的相关配置 而legend就是Echarts图表中对图形的解释部分： 其中legend自身常用的配置属性如下： orient 设置图例的朝向 属性值： vertical // 垂直显示 或者 horizontal // 水平显示 legend: { orient: 'vertical' } legend: { orient: 'horizontal' } x/y(left/top) 设置图例在X轴方向
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值