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

最新推荐文章于 2023-12-19 14:32:35 发布
最新推荐文章于 2023-12-19 14:32:35 发布
阅读量1k 收藏 1
点赞数 3
CC 4.0 BY-SA版权
文章标签： css webkit 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49523082/article/details/131164392
博客主要围绕解决CSS中-webkit-box-orient: vertical属性编译后丢失的问题展开。起因是在需求展示两行，多余文字用三点替代时用到相关属性。给出的解决办法有关闭autoprefixer，但此操作会在编译过程中报warning，还有另一种解决方案未详述。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

一、 起因
在需要需求展示两行，多余的文字用三个点替代，用到了几个属性。

display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

二、解决办法

  1. 把autoprefixer关掉(但会在编译过程中报warning)
/*! autoprefixer: off */
-webkit-box-orient: vertical;
/* autoprefixer: on */
  1. 第2中解决方案
/* autoprefixer: ignore next */
-webkit-box-orient: vertical;
vue中打包后-webkit-box-orient: vertical消失（超出省略号失效）
Wangdr的博客
06-20 1533
之前写代码的时候遇到一个问题，就是用了下面这段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 988
多出指定行后，用省略号…代替。 -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： - display: -webkit-box：必须结合的属性 ，将对象作为弹性伸缩盒子模型...
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
CSS -webkit-box-orient: vertical 属性编译或打包后丢失问题
高宇辰
12-19 650
最近在写项目的时候遇到一个问题，需求是表格中的备注字段只显示2行，超出显示…，鼠标悬浮显示完整。;
vue项目中关于CSS样式【-webkit-box-orient: vertical】打包后丢失问题
qq_25335529的博客
05-10 3573
        最近在做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...
webpack 打包编译-webkit-box-orient: vertical 后消失
weixin_30448685的博客
03-08 203
/* autoprefixer: off */ -webkit-box-orient: vertical; // 参考 https://github.com/postcss/autoprefixer/issues/776 /* autoprefixer: on */ 打包时必须使用这种方法打包，否则打包后-webkit-box-orient: vertical ...
-webkit-box-orient: vertical的含义是什么
最新发布
03-12
好的，我现在需要回答用户关于CSS属性`-webkit-box-orient: vertical`的问题。首先，我需要理解这个属性的基本含义和作用。根据用户提供的引用资料，这个属性通常与多行文本截断相关，比如显示两行文本，超出部分用...
uniapp中使用-webkit-box-orient: vertical; -webkit-line-clamp: 3;这两行代码报错:This could be due to syntax errors or importing non-existent modules. (see errors above)
05-25
这两行代码是 CSS3 的属性，应该放在 CSS 样式中，而不是在 JavaScript 或者 Vue 模板中使用。如果你在 Vue 模板中使用这两行代码，会导致编译错误，因为 Vue 模板中只能使用 HTML 标签和 Vue 模板语法。 如果你想...
-webkit-box-orient: vertical打包build后丢失问题
邓波的博客
07-27 1077
方法一： /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ 方法二： 需把webpack.prod.conf.js文件一下代码注释掉 new OptimizeCSSPlugin({ cssProcessorOptions: config.build.production...
vue项目打包后样式-webkit-box-orient: vertical丢失
DreamFJ的博客
03-01 534
vue项目打包后样式-webkit-box-orient: vertical居然神奇的消失了，好像跟optimize-css-assets-webpack-plugin这个插件有关，解决办法：https://github.com/postcss/autoprefixer/issues/776 1.css 2.scss要加"!" ...
vue项目中关于CSS样式-webkit-box-orient: vertical丢失问题
m0_57484291的博客
03-01 1362
-webkit-box-orient: vertical丢失
webpack升级后发现-webkit-box-orient 属性 丢失
qq_46370075的博客
10-10 284
添加 /* autoprefixer: ignore next */ 注释 让autoprefixer不杀掉这个属性。如果使用 autoprefixer的块级注释， 会在编译时报警告。属性丢失 页面不报错，但是导致页面内容为空。属性丢失导致没有出现省略号。
-webkit-box-orient: vertical；本地编译、打包失效
你蠢哭我咯的博客
07-21 1007
autoprefixer可以自动在样式中添加浏览器厂商前缀，避免手动处理样式兼容问题。 多行文本设置-webkit-box-orient: vertical;属性后，autoprefixer不生效问题。 //在scss中 /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ // 在css中 /* autoprefixer: off */ -webkit-box-orient: vertical; /*
[ -webkit-box-orient: vertical ] 打包后丢失问题
江木
11-06 813
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性，本地跑项目没问题，但是打包放到服务器后发现这个属性丢失了。   1. 加上这注释命令 /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ 2. optimiz...
-webkit-box-orient: vertical 打包后丢失的问题
weixin_30772105的博客
03-13 380
以上代码是scss中书写的超出N行省略的css代码。 正常的，当我们通过css来控制超出N行隐藏的时候，一般css会这样来写， overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; 这几行代...
css打包丢失,webpack打包build时css样式-webkit-box-orient丢失问题的解决方案
weixin_39864373的博客
08-03 1317
最近遇到一个奇怪的问题，在设置超出n行即显示省略号的css时，开发环境都没有问题，而build之后发现不好使，通过调试发现是-webkit-box-orient这个样式丢失了我写的css样式display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;打包之后的css样式，缺少-we...
webpck -webkit-box-orient: vertical
weixin_39168678的博客
11-21 366
/*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ 信大哥的，没错
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值