CSS -webkit-box-orient: vertical属性编译后丢失问题

最新推荐文章于 2024-04-03 09:10:23 发布
原创 最新推荐文章于 2024-04-03 09:10:23 发布 · 307 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html #css #css3

本文介绍了解决CSS-webkit-box-orient属性在编译过程中丢失的方法，包括关闭autoprefixer、使用注释忽略特定规则及直接使用行内样式的三种方案。

CSS -webkit-box-orient: vertical属性编译后丢失问题
该问题进行记录

方法一、
网上找了一个可行的解决方案，把autoprefixer关掉，有一种写法：

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

这样确实解决了编译丢失的情况，但会在编译过程中报warning，最后到GitHub上找到最佳解决方案,如下
方法二、

/* autoprefixer: ignore next */
-webkit-box-orient: vertical;

问题完美解决，也不报warning了。

方法三、
将该样式 写在行内样式

style="webkitBoxOrient: vertical"
Janicelily
关注
vue中打包后-webkit-box-orient: vertical消失（超出省略号失效）
Wangdr的博客
06-20 1582
之前写代码的时候遇到一个问题，就是用了下面这段css代码来让文字超出范围隐藏并显示省略号。 overflow:hidden;/*超出隐藏*/ text-overflow:ellipsis;/*文本溢出时显示省略标记*/ display:-webkit-box;/*设置弹性盒模型*/ -webkit-line-clamp:1;/*文本占的行数,如果要设置2行加...则设置为2*/ -webkit-b...
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
每日一结笔记
xz100599的博客
09-07 1071
方法1：省略号：设置盒子的宽度(限制宽度)设置文本不换行溢出隐藏文本溢出的显示省略号方法2：伪元素：溢出隐藏强制不换行子绝父相、
2021- 07-08 Day09CSS基础 第七天
weixin_49911270的博客
07-08 296
Day09-前端基础CSS第七天 学习目标： ​ 能够使用精灵图 ​ 能够使用字体图标 ​ 能够写出 CSS 三角 ​ 能够写出常见的 CSS 用户界面样式 ​ 能够说出常见的布局技巧 1. 精灵图（重点） 1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接收和发送请求图片，造成服务器请求压力过大，这将大大降低页面的加载速度。 为什么使用精灵图（目的）： ​ 为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了 CSS 精灵
vue项目中关于CSS样式【-webkit-box-orient: vertical】打包后丢失问题
qq_25335529的博客
05-10 3606
        最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性，本地跑项目没问题，但是打包放到服务器后发现这个属性丢失了。如下图：.topic-info { margin: 5px 10px; font-size: .8em; text-indent: 2em; d...
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...
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
06-15
为了实现多行文本溢出时显示省略号的效果，可以结合以下 CSS 属性：`display: -webkit-box`, `-webkit-line-clamp: 3`, 和 `-webkit-box-orient: vertical`。这些属性主要用于 Webkit 内核的浏览器（如 Chrome 和 ...
-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
-webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; 但是实际只显示了一行，可能的原因包括： 1. 容器高度不足或高度设置成了单行的高度（即只够显示一行）...
解决-webkit-box-orient: vertical;（文本溢出）属性在webpack打包后无法编译的问题
weixin_34302561的博客
02-27 172
在scss里面： /*! autoprefixer: off */-webkit-box-orient: vertical;/* autoprefixer: on */ 转载于:https://www.cnblogs.com/dujunfeng/p/8480241.html
vue项目中关于CSS样式-webkit-box-orient: vertical丢失问题
m0_57484291的博客
03-01 1410
-webkit-box-orient: vertical丢失
CSS -webkit-box-orient: vertical 属性编译或打包后丢失问题
高宇辰
12-19 739
最近在写项目的时候遇到一个问题，需求是表格中的备注字段只显示2行，超出显示…，鼠标悬浮显示完整。;
-webkit-box-orient: vertical; 不显示
QIANG123___的博客
01-11 772
webpack 打包编译-webkit-box-orient: vertical 后消失 解决方案： 加注释，不让去掉 /*! autoprefixer: off */ -webkit-box-orient: vertical; // 参考 https://github.com/postcss/autoprefixer/issues/776 /* autoprefixer: on */...
VUE / css -webkit-box-orient: vertical 打包放到线上不显示
Lear的博客
06-01 530
2.在我们的webpack.config.js文件中，找到 new webpack.optimize.UglifyJsPlugin，在里面添加一条 mangle:false，这个的意思是删除注释。1.直接在行内加 -webkit-box-orient: vertical（个别元素添加适合）4.找到webpack.prod.conf.js，并将如下代码注释。这个属性在本地运行是存在的，但是打包后放到线上这个属性消失了；问题出现原因：打包时这个属性和注释混在了一起（个人猜测）3.把这句代码前后都加注释，如下。
解决CSS中-webkit-box-orient: vertical属性编译后丢失问题
weixin_49523082的博客
06-12 1115
解决CSS中-webkit-box-orient: vertical属性编译后丢失问题
vue项目打包后样式-webkit-box-orient: vertical丢失
DreamFJ的博客
03-01 558
vue项目打包后样式-webkit-box-orient: vertical居然神奇的消失了，好像跟optimize-css-assets-webpack-plugin这个插件有关，解决办法：https://github.com/postcss/autoprefixer/issues/776 1.css 2.scss要加"!" ...
解决-webkit-box-orient: vertical在webpack打包后丢失问题
高先生的猫
09-29 918
问题描述 在项目中需要使用多行文本溢出显示省略号(…)的时候，首先想到的css如下： overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; 该方式比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。但是在现在一些框架中如(vue,react项目中使用)，会发现本地正常，打包线上后，该属性丢失。因为
webpck不能编译这个多行文本溢出属性-webkit-box-orient: vertical,自动隐藏
杨梦飞
04-12 1496
optimize-css-assets-webpack-plugin这个插件的问题 注释掉webpack.prod.conf.js中下面的代码 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.productionSourceMap ? { safe: true, map: { inline: false } }...
uniapp view组件中的 -webkit-box-orient 属性
活到老学到老
04-03 2187
在上面的示例中，view组件的class为container的元素具有flex布局，并且通过设置-webkit-box-orient属性为vertical，实现了子元素的垂直排列效果。在uni-app中，推荐使用flex-direction属性来控制子元素的排列方向，而不是直接使用-webkit-box-orient属性。在uni-app中，view组件使用了flex布局，可以通过设置-webkit-box-orient属性来控制子元素的排列方向。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值