-webkit-box-orient 样式无效

最新推荐文章于 2022-11-28 16:29:36 发布
最新推荐文章于 2022-11-28 16:29:36 发布
阅读量1.2k 收藏 1
点赞数 1
原文链接：http://www.cnblogs.com/ccbabi/p/10141930.html
版权

问题：

同事遇一问题，说代码打包后，说在文件中的样式，如：

-webkit-box-orient: vertical;

在浏览器中没生效，审查元素也没有此样式，后经查看原来是autoprefixer的问题。

 

解决办法：

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

 

issues：

https://github.com/postcss/autoprefixer/issues/776

转载于:https://www.cnblogs.com/ccbabi/p/10141930.html

weixin_30405421
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS -webkit-box-orient: vertical属性编译后丢失问题详解
01-19
一、起因 需求要求展示两行，多余的文字用三个点替代，于是用了这几个不太规范的属性 display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是-webkit-box-orient: vertical;这个属性丢失，导致了不生效，在Styles里把这个属性加上就好了，于是断定是编译过程导致这个属性丢失。 二、解决办法 网上找了一个可行的解决方案，把autoprefixer关掉，有一种写法： /*! autoprefixe
css3弹性布局-webkit-box的用法演示
11-04
二、`-webkit-box-direction`与`-webkit-box-orient` `-webkit-box-direction`决定了子元素的排列方向。默认值是`normal`，子元素从左到右排列（对于水平布局）或从上到下排列（对于垂直布局）。设置为`reverse`时，...
-webkit-box-orient打包后无效
Rainy_X的博客
11-28 329
-webkit-box-orient打包后无效
vue 打包 -webkit-box-orient 失效
sani_x的博客
11-08 390
一行溢出不显示 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
vue中使用-webkit-line-clamp、-webkit-box-orient属性，项目打包后不生效？
Allen-Ye博客
01-10 1970
在本地开发中，-webkit-box-orient就文字超出显示。。。是可以正常使用，可是把项目打包到服务器上面，这个功能就出问题，网上查资料看的说原因是： 会被打包的postCSS这个插件去掉的，好像是因为这个属性不是规范。 可以写在行内style里面，这样就不会被插件去掉了。 经过排斥然后有以下两种解决方法 解决方法： 第一种直接设置css： /*！autoprefixer: off */ -webkit-box-orient: vertical; -webkit-line-clam
-webkit-box-orient:vertical 失效
Jioho的博客
08-30 2088
首发地址-webkit-box-orient:vertical 失效 问题引出 -webkit-box-orient:vertical 属性常用在多行文本溢出 譬如这段超出 2 行文本溢出的代码，眼看好像没啥问题（火狐没这个属性，自然不支持） .box { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
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存储库如何使用玛文...
vue webpack打包 -webkit-box-orient 失效
qq_35149546的博客
08-21 182
1.vue webpack打包 -webkit-box-orient 失效
Taro -webkit-box-orient: vertical 失效
小鑫の随笔
01-06 225
在使用 taro 写多行文本超出显示省略号时，发现 -webkit-box-orient: vertical; 没起作用 最后去社区查了下，发现有人遇到了同样的问题，最后得到的解决方案是： 第一种 /* autoprefixer: ignore next */ -webkit-box-orient: vertical; 第二种 /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ 两种凡是都是加入 css
vue build 之后页面 -webkit-line-clamp: 2; -webkit-box-orient: vertical;失效不起作用
晏紫苏_cc的博客
10-29 1395
找到./build/webpack.prod.config.js 文件 找到下面的这段代码 注释掉 重新打包即可 // -webkit-line-clamp、-webkit-box-orient vue打包后不起作用 注释下面这段代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSo...
react项目中关于css样式-webkit-box-orient: vertical不生效问题
zeroyulong的博客
08-21 2559
react项目中关于css样式-webkit-box-orient: vertical 代码中有此样式，项目跑起来后发现此属性丢失 .name{ font-size: 14px; height: 36px; line-height: 18px; overflow: hidden; ...
webpack3不编译-webkit-box-orient: vertical;的问题的解决办法
u010289890的博客
09-12 2347
需求：通过-webkit-box-orient: vertical;实现div中的内容显示两行，并在结尾加省略号 css样式： webpack编译结果： 解决方式1： autoprefixer不仅会帮你加-webkit-之类的prefixer，还会删除css中的样式，用注释包裹就不会被删除；注意：autoprefixer:on和autoprefixer:off必须用/* */包...
vue -webkit-box-orient: vertical;不生效问题
qq_37759796的博客
06-09 390
在项目开发的过程中遇到这么一个问题，设置文字最多显示两行，多余的隐藏并以省略号代替，代码如下： { line-height: 28...
vue -webkit-box-orient: vertical打包放到线上不显示
幸福的七种颜色的博客
03-15 2647
在展示页面效果的时候，尤其是移动端上的界面，我们经常会有需求，最多展示两行，其余用“...”代替。于是，就产生了下面的样式：            .div {            text-align: left;     text-overflow: -o-ellipsis-lastline;     overflow: hidden;     text-overflow: ellipsis...
如何解决CSS中-webkit-box-orient: vertical属性编译后丢失问题
Anony_me的博客
06-15 3362
一、起因需求要求展示两行，多余的文字用三个点替代，于是用了这几个不太规范的属性 后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是这个属性丢失，导致了不生效，在Styles里把这个属性加上就好了，于是断定是编译过程导致这个属性丢失。二、解决办法网上找了一个可行的解决方案，把autoprefixer关掉，有一种写法： 这样确实解决了编译丢失的情况，但会在编译过程中报warning，最后到GitHub上找到最佳解决方案,如下 问题解决，也不报warning了。...
解决webpack打包后-webkit-box-orient被移除问题
screaming_color的博客
07-05 4253
[产生原因] : autoprefixer自动移除老式过时的代码 [关于autoprefixer] : https://www.npmjs.com/package/autoprefixer [解决] 方法一: 添加注释关闭autoprefixer,但是若果有清除注释的插件,请将该插件设为false,否则不生效 /* autoprefixer: off */ -webkit-box-ori...
React--webkit-line-clamp、-webkit-box-orient打包之后不起作用
ccx
12-26 1722
在项目中要实现多行省略，-webkit-line-clamp: 2;打包后不生效，使用下面的方法样式为.. overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; 结果打包之...
-webkit-box-orient: vertical;
最新发布
07-25
具体来说，`-webkit-box-orient: vertical;` 是用于将子元素在垂直方向上进行排列。在使用这个属性时，需要确保容器的显示方式 (`display`) 为 `-webkit-box`，这样才能生效。 注意，`-webkit-box-orient` 是 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值