-webkit-box-orient打包后无效

最新推荐文章于 2024-04-03 09:10:23 发布
最新推荐文章于 2024-04-03 09:10:23 发布
阅读量324 收藏
点赞数
文章标签： webkit javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rainy_X/article/details/128082386
版权

问题描述

-webkit-box-orient 属性在通过打包工具打包后该样式无效

原因

启动了 autoprefixer

解决方法

  • 方法一
    css中关闭 autoprefixer
/* autoprefixer: off*/
-webkit-box-orient: vertical;
/* autoprefixer: on*/
  • 方法二
    将 -webkit-box-orient 样式写为内联样式
<div style="-webkit-box-orient: vertical">内联样式</div>
Rainy_X
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
CSS -webkit-box-orient: vertical属性编译后丢失问题详解
01-19
后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是-webkit-box-orient: vertical;这个属性丢失，导致了不生效，在Styles里把这个属性加上就好了，于是断定是编译过程导致这个属性...
CSS -webkit-box-orient: vertical 属性编译后丢失问题详解
热门推荐
weixin_41544124的博客
06-17 2万+
最近在写项目的时候遇到一个问题，需求是标题只显示2行，超出显示... 代码如下 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidd...
box-orient属性
xiandangdidi的博客
05-07 588
盒子2
uniapp view组件中的 -webkit-box-orient 属性
最新发布
活到老学到老
04-03 1140
在上面的示例中，view组件的class为container的元素具有flex布局，并且通过设置-webkit-box-orient属性为vertical，实现了子元素的垂直排列效果。在uni-app中，推荐使用flex-direction属性来控制子元素的排列方向，而不是直接使用-webkit-box-orient属性。在uni-app中，view组件使用了flex布局，可以通过设置-webkit-box-orient属性来控制子元素的排列方向。
2021- 07-08 Day09CSS基础 第七天
weixin_49911270的博客
07-08 214
Day09-前端基础CSS第七天 学习目标： ​ 能够使用精灵图 ​ 能够使用字体图标 ​ 能够写出 CSS 三角 ​ 能够写出常见的 CSS 用户界面样式 ​ 能够说出常见的布局技巧 1. 精灵图（重点） 1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 为什么使用精灵图（目的）： ​ 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵
如何解决CSS中-webkit-box-orient: vertical属性编译后丢失问题
Anony_me的博客
06-15 3339
一、起因需求要求展示两行，多余的文字用三个点替代，于是用了这几个不太规范的属性 后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是这个属性丢失，导致了不生效，在Styles里把这个属性加上就好了，于是断定是编译过程导致这个属性丢失。二、解决办法网上找了一个可行的解决方案，把autoprefixer关掉，有一种写法： 这样确实解决了编译丢失的情况，但会在编译过程中报warning，最后到GitHub上找到最佳解决方案,如下 问题解决，也不报warning了。...
css3弹性布局-webkit-box的用法演示
11-04
二、`-webkit-box-direction`与`-webkit-box-orient` `-webkit-box-direction`决定了子元素的排列方向。默认值是`normal`，子元素从左到右排列（对于水平布局）或从上到下排列（对于垂直布局）。设置为`reverse`时，...
css -webkit-line-clamp WebKit的CSS扩展(WebKit是私有属性)
12-12
-webkit-line-clamp 概述： -webkit-line-clamp 是一个 不规范的... -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。 text-overflow，可以用来多行文本的情况下，用省略号“…”
orientdb-spring：OrientDB与Spring的集成
02-03
**OrientDB与Spring的集成** 在现代软件开发中，数据存储是至关重要的部分，而NoSQL数据库由于其灵活性和高性能，已经获得了广泛的应用。OrientDB作为一个多模式的图数据库，结合了文档数据库、图形数据库和键值对...
spring-session-orientdb:Spring会议扩展
04-27
Spring Session OrientDB扩展Spring Session OrientDB是一个扩展，它使用作为会话存储。如何建造克隆此存储库在项目文件夹中运行./gradlew clean install以构建项目并将其安装到本地Maven存储库如何使用玛文...
弹性布局各种坑爹兼容
weixin_30823227的博客
10-05 896
当然也看到过遇到flexbox布局的属性将所有的新的老的前缀都加上的，这样省事啊 谁闲着没事整天研究那几个属性的兼容，更可况前端发展这么快说不定有更牛逼的样式出现 但是想在移动端用好这个布局摸透这个属性 我还是一个个都探究下吧，在此先说下各浏览器PC端最新版本情况目前：IE最新版本是ie11， FF最新版本是ff41.0， Chrome最新版本是chrome45.0， Safira最新版本8.0...
解决CSS中-webkit-box-orient: vertical属性编译后丢失问题
weixin_49523082的博客
06-12 608
解决CSS中-webkit-box-orient: vertical属性编译后丢失问题
解决Webpack打包时自动过滤-webkit-box-orient，导致属性不生效
m0_54281583的博客
07-27 333
使用文字超长自动显示省略号。本地运行测试完全没有问题，但是使用WebPack打包后，发布到服务器上，属性失效。debug查看，CSS中-webkit-box-orient:vertical消失了？？？？？？调查了很长时间，网上各种找攻略，都不好使。下面两种亲测根本不好用。编译的时候还是会自动过滤。而且第一种在vscode编译的时候，还会报警告。还有一种方式直接关闭autoprefixer: {remove: false}，不推荐！！！！使用内联样式，完美解决问题！！！！
每日一结笔记
xz100599的博客
09-07 685
方法1：省略号：设置盒子的宽度(限制宽度)设置文本不换行溢出隐藏文本溢出的显示省略号方法2：伪元素：溢出隐藏强制不换行子绝父相、
CSS -webkit-box-orient: vertical 属性编译或打包后丢失问题
高宇辰
12-19 313
最近在写项目的时候遇到一个问题，需求是表格中的备注字段只显示2行，超出显示…，鼠标悬浮显示完整。;
2021-07-22
m0_56305452的博客
07-22 210
一、垂直对齐 定义：在垂直方向设置元素的位置。 应用场景：logo垂直居中；下拉菜单垂直居中；控制文本与图片的位置。 语法：vertical-align（bottom，如果父级元素设置了line-height，那么bottom在父级div的最下方） 属性值：middle/top/text-top/bottom/text-bottom middle（实现垂直居中）/texte-top/bottom（文字的最上/下方）/top/bottom（，在line-height的最上/下方） 二、white-
webpack升级后发现-webkit-box-orient 属性 丢失
qq_46370075的博客
10-10 133
添加 /* autoprefixer: ignore next */ 注释 让autoprefixer不杀掉这个属性。如果使用 autoprefixer的块级注释， 会在编译时报警告。属性丢失 页面不报错，但是导致页面内容为空。属性丢失导致没有出现省略号。
vue 打包 -webkit-box-orient 失效
sani_x的博客
11-08 387
一行溢出不显示 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; 多行溢出不显示 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 需要添加注释，来解决这个问题，注意css和scss的方法是不一样的！！！ 在scss中 /*! autopr
html文字两行显示其余隐藏,css 文本超出2行就隐藏并且显示省略号，并解决在less中不生效的问题...
weixin_29846499的博客
06-03 1346
首先，要知道css的三条属性。overflow:hidden; //超出的文本隐藏text-overflow:ellipsis; //溢出用省略号显示white-space:nowrap; //溢出不换行这三个是css的基础属性，需要记得。但是第三条属性，只能显示一行，不能用在这里，那么如何显示多行呢？css3解决了这个问题，解决方法如下：display:-webkit-box; //将对象作为弹...
-webkit-box-orient: vertical;
07-25
具体来说，`-webkit-box-orient: vertical;` 是用于将子元素在垂直方向上进行排列。在使用这个属性时，需要确保容器的显示方式 (`display`) 为 `-webkit-box`，这样才能生效。 注意，`-webkit-box-orient` 是 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值