-webkit-box-orient: vertical；本地编译、打包失效

最新推荐文章于 2023-12-19 14:32:35 发布
最新推荐文章于 2023-12-19 14:32:35 发布
阅读量932 收藏
点赞数
分类专栏： css样式 文章标签： css
原文链接：https://www.imooc.com/wenda/detail/542303
版权

autoprefixer可以自动在样式中添加浏览器厂商前缀，避免手动处理样式兼容问题。
多行文本设置-webkit-box-orient: vertical;属性后，autoprefixer不生效问题。

//在scss中
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */

// 在css中
/* autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
你蠢哭我咯
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
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轴方向
CSS -webkit-box-orient: vertical属性编译后丢失问题详解
01-19
后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是-webkit-box-orient: vertical;这个属性丢失，导致了不生效，在Styles里把这个属性加上就好了，于是断定是编译过程导致这个属性...
解决CSS中-webkit-box-orient: vertical属性编译后丢失问题
weixin_49523082的博客
06-12 603
解决CSS中-webkit-box-orient: vertical属性编译后丢失问题
如何解决CSS中-webkit-box-orient: vertical属性编译后丢失问题
Anony_me的博客
06-15 3337
一、起因需求要求展示两行，多余的文字用三个点替代，于是用了这几个不太规范的属性 后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是这个属性丢失，导致了不生效，在Styles里把这个属性加上就好了，于是断定是编译过程导致这个属性丢失。二、解决办法网上找了一个可行的解决方案，把autoprefixer关掉，有一种写法： 这样确实解决了编译丢失的情况，但会在编译过程中报warning，最后到GitHub上找到最佳解决方案,如下 问题解决，也不报warning了。...
每日一结笔记
xz100599的博客
09-07 668
方法1：省略号：设置盒子的宽度(限制宽度)设置文本不换行溢出隐藏文本溢出的显示省略号方法2：伪元素：溢出隐藏强制不换行子绝父相、
-webkit-box-orient打包后无效
Rainy_X的博客
11-28 324
-webkit-box-orient打包后无效
css3弹性布局-webkit-box的用法演示
11-04
`-webkit-box-orient`属性定义了主轴的方向，可以是`horizontal`（水平）或`vertical`（垂直）。它与`-webkit-box-direction`配合使用，共同决定子元素的排列方式。 三、`-webkit-box-pack` `-webkit-box-pack`属性...
spring-session-orientdb:Spring会议扩展
04-27
如何建造克隆此存储库在项目文件夹中运行./gradlew clean install以构建项目并将其安装到本地Maven存储库如何使用玛文< dependency> < groupId>io.github.maseev</ groupId> < artifactId>spring-session-orientdb...
orientdb-spring：OrientDB与Spring的集成
02-03
**OrientDB与Spring的集成** 在现代软件开发中，数据存储是至关重要的部分，而NoSQL数据库由于其灵活性和高性能，已经获得了广泛的应用。OrientDB作为一个多模式的图数据库，结合了文档数据库、图形数据库和键值对...
orientdb-spring-samples：orientdb-spring样本包
02-03
《OrientDB-Spring 样本包解析与应用探索》 OrientDB 是一款功能强大的NoSQL数据库系统，尤其在图数据库领域具有显著优势。它不仅支持文档型数据库，还支持图形数据库，使得数据关系的表示更为直观和高效。而Spring...
CSS -webkit-box-orient: vertical 属性编译或打包后丢失问题
最新发布
高宇辰
12-19 306
最近在写项目的时候遇到一个问题，需求是表格中的备注字段只显示2行，超出显示…，鼠标悬浮显示完整。;
解决Webpack打包时自动过滤-webkit-box-orient，导致属性不生效
m0_54281583的博客
07-27 329
使用文字超长自动显示省略号。本地运行测试完全没有问题，但是使用WebPack打包后，发布到服务器上，属性失效。debug查看，CSS中-webkit-box-orient:vertical消失了？？？？？？调查了很长时间，网上各种找攻略，都不好使。下面两种亲测根本不好用。编译的时候还是会自动过滤。而且第一种在vscode编译的时候，还会报警告。还有一种方式直接关闭autoprefixer: {remove: false}，不推荐！！！！使用内联样式，完美解决问题！！！！
webpack升级后发现-webkit-box-orient 属性 丢失
qq_46370075的博客
10-10 132
添加 /* autoprefixer: ignore next */ 注释 让autoprefixer不杀掉这个属性。如果使用 autoprefixer的块级注释， 会在编译时报警告。属性丢失 页面不报错，但是导致页面内容为空。属性丢失导致没有出现省略号。
vue中使用-webkit-line-clamp、-webkit-box-orient属性，项目打包后不生效？
Allen-Ye博客
01-10 1935
在本地开发中，-webkit-box-orient就文字超出显示。。。是可以正常使用，可是把项目打包到服务器上面，这个功能就出问题，网上查资料看的说原因是： 会被打包的postCSS这个插件去掉的，好像是因为这个属性不是规范。 可以写在行内style里面，这样就不会被插件去掉了。 经过排斥然后有以下两种解决方法 解决方法： 第一种直接设置css： /*！autoprefixer: off */ -webkit-box-orient: vertical; -webkit-line-clam
弹性盒模型
李少影的博客
07-31 512
1.父元素添加display:-浏览器内核前缀-box; 2.:-浏览器内核前缀-box-orient:vertical默认横向显示 3.搜狗是webkit内核
自适应布局webkit-box的用法
m0_72200584的博客
02-01 1608
自适应布局webkit-box的用法
解决-webkit-box-orient: vertical在webpack打包后丢失问题
高先生的猫
09-29 689
问题描述 在项目中需要使用多行文本溢出显示省略号(…)的时候，首先想到的css如下： overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 该方式比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。但是在现在一些框架中如(vue,react项目中使用)，会发现本地正常，打包线上后，该属性丢失。因为
VUE -webkit-box-orient: vertical打包放到线上不显示
niesiyuan000的博客
02-09 5023
先说明问题是什么，出现的状况是 -webkit-box-orient: vertical这个属性在本地运行是存在的，但是打包后放到线上这个属性消失了； 问题出现原因：打包时这个属性和注释混在了一起（个人猜测） 解决办法：下面每种都可解决，根据个人需求随意挑选 1.直接在行内加 -webkit-box-orient: vertical（虽然管用但是我的项目需要添加的这个太多了，所以我选择...
解决webpack打包后-webkit-box-orient: vertical;失效问题
haolijuan520的博客
12-03 579
在展示页面效果的时候，尤其是移动端上的界面，我们经常会有需求，最多展示两行，其余用“…”代替。 于是，就产生了下面的样式： .div { text-align: left; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webki...
-webkit-box-orient: vertical;
07-25
这个属性是用于控制某个容器内的子元素排列方向的。具体来说，`-webkit-box-orient: vertical;` 是用于将子元素在垂直方向上进行排列。在使用这个属性时，需要确保容器的显示方式 (`display`) 为 `-webkit-box`，这样才能生效。 注意，`-webkit-box-orient` 是 WebKit 浏览器的私有属性，其他浏览器可能不支持。在现代的 CSS 标准中，我们更常使用 `flexbox` 或 `grid` 来实现布局和排列方向的控制。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值