解决webpack不能编译scss文件中的-webkit-box-orient:vertical问题 -webkit-box-orient:vertical 这个样式丢失了

最新推荐文章于 2024-07-26 15:29:05 发布

原创最新推荐文章于 2024-07-26 15:29:05 发布 · 700 阅读

0 ·

CC 4.0 BY-SA版权

本文解决了一个在使用Webpack编译SCSS文件时遇到的问题：-webkit-box-orient:vertical样式丢失，导致多行文本溢出处理失效。通过在样式中添加注释禁用autoprefixer，成功保留了该样式。

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

解决webpack不能编译scss文件中的-webkit-box-orient:vertical问题

最近项目遇到一个问题：

　　处理多行文本溢出的样式，但是在webpack编译之后，-webkit-box-orient:vertical 这个样式丢失了

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2; 　

　　解决方法：

/*!autoprefixer:off*/

-webkit-box-orient: vertical;

/*autoprefixer:on*/

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

after you

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS中文本对齐方式-文本处理案例

JackieDYH的博客

08-16

2992

文本对齐方式 CSS最常用的对齐方式，居中对齐、左对齐（默认）、右对齐，而且实现起来也是非常的简单 p{ text-align: center; text-align: left; text-align: right; } 但是两端对齐你有用过吗？只需要添加text-align-last:justify样式即可 <div class="justify-text"> <div class="li">账号</div> <div clas

多行文本显示省略、解决vue build 打包不生效问题

晏紫苏_cc的博客

05-17

709

多行文本显示隐藏 <style> .text { text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient:vertical; } </style> 遇到的问题： -webkit-box-...

参与评论您还未登录，请先登录后发表或查看评论

webpack3不编译-webkit-box-orient: vertical;的问题的解决办法

u010289890的博客

09-12

2405

需求：通过-webkit-box-orient: vertical;实现div中的内容显示两行，并在结尾加省略号 css样式： webpack编译结果：解决方式1： autoprefixer不仅会帮你加-webkit-之类的prefixer，还会删除css中的样式，用注释包裹就不会被删除；注意：autoprefixer:on和autoprefixer:off必须用/* */包...

css visibility 导致 -webkit-box-orient/-webkit-line-clamp多行显示失效

cannon9527的博客

03-02

673

记一个开发中遇到的样式问题如图显示多行显示没有按照正常显示“…” 排查结果：因为这个下拉模块中因为动画问题使用了visibility :hidden来替换了display:none，而在visibility:hidden下节点的text变动，当切换到visibility：visible时是不会渲染"…"的; 修改结果： 1、在使用visibility :hidden的情况下避免使用-webk...

Taro -webkit-box-orient: vertical失效

harry_yaya的博客

04-24

560

问题复现用Taro写一块文本超出部分用…替代,效果如下：正常逻辑 overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word...

Webpack打包css到js中css样式不起效果

43612538的博客

10-30

1173

检查你的webpack.config.js文件有没有style-loader style-loader可以帮我们将css-loader解析后的内容挂载到html页面当中，css-loader只是帮我们解析了css文件里面的css代码但是没有帮我们挂载。所以style-loader必须要有。 module: { rules: [ { test: /\.css$/, use: [

webpack编译出来的css不生效

风烟

09-01

1075

项目从webapck3升级到webpack5，vue中的scss编译出来的是这个样子，看起来scss loader配置没问题，就是vue-loader配置版本的问题了。

vue.js移动端app实战1：初始配置详解

12-09

-webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } @mixin table-center { display: table-cell; vertical-align: middle; text-align: center; } @mixin flex-center { ...

uni-app 开发

hujian66的博客

04-06

309

uni-app 开发/学习笔记

Vue-Element-Admin插件开发速成：5种方法扩展框架功能，提升开发者体验

!... # 摘要本文对Vue-Element-Admin进行了全面的介绍，详细阐述了其基础概念、主题风格的定制方法、插件开发的理论与实践，以及如何提升开发体验。通过对Element UI的SASS变量深入理解和实践操作，展示了如何自定义...

【SCSS】全局变量不生效问题； js 中使用 scss 变量问题(vue3 项目)

汤一飞

07-26

1002

【代码】【SCSS】全局变量不生效问题；js 中使用 scss 变量问题(vue3 项目)

解决vscode编译后scss文件中的-webkit-box-orient:vertical属性丢失问题

姚家威的博客

10-29

766

平常对于文字的超出隐藏是自己封装的样式类之前一直没发现，知道一个项目中发现设置了超出三行显示隐藏失效，最后发现scss编译过后的css文件中是没有-webkit-box-orient:vertical的。原来是autoprefixer把这个属性给自动删掉了，只需要通过以下注释就能解决这个问题 ...

react项目中关于css样式-webkit-box-orient: vertical不生效问题

zeroyulong的博客

08-21

2651

react项目中关于css样式-webkit-box-orient: vertical 代码中有此样式，项目跑起来后发现此属性丢失 .name{ font-size: 14px; height: 36px; line-height: 18px; overflow: hidden; ...

Webpack配置编译SCSS

justforuse的博客

03-08

8598

原文地址： https://justforuse.github.io/blog/2019/03/webpack-compile-scss/ 现在框架都提供了一套完整的编译配置，比如Vue; 有时只是需要编译scss文件，在使用gulp的方式时遇到了无法识别SCSS的~语法的问题，其实也可以通过一些配置来解决，只是觉得既然webpack是主流，那不妨总结一套专门编译scss的配置 webpack.c...

taro开发中的样式问题

u014663631的博客

03-20

2万+

众所周知，taro是一套遵循 React 语法规范的多端开发解决方案，所以开发的时候离不了组件的思想。所以这里关于样式特别强调一点：由于编译成 h5 时，一个页面上的众多组件在 h5 中，整体渲染在一个大的 html 文件里面，最终同属于一个页面，因此各个组件里面的样式名称，即className，即使没有相互引用，因为渲染成一个页面的原因，也是会相互影响的，因此各个组件的样式名称不要出现重复相同...

-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...

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

最新发布

03-12

<think>好的，我现在需要回答用户关于CSS属性`-webkit-box-orient: vertical`的问题。首先，我需要理解这个属性的基本含义和作用。根据用户提供的引用资料，这个属性通常与多行文本截断相关，比如显示两行文本，超出部分用省略号表示。接下来，我应该解释`-webkit-box-orient`的作用。它属于Flexible Box Layout模块的一部分，但带有浏览器前缀`-webkit-`，说明这是Webkit内核浏览器的私有属性。`vertical`值指定了子元素在容器中的排列方向是垂直方向。不过，用户提到的场景中，这个属性通常与`-webkit-line-clamp`一起使用，用于控制文本的行数并实现多行省略效果。然后，我需要考虑用户可能遇到的编译后属性丢失的问题。根据引用内容，打包工具如Autoprefixer可能会自动移除或优化带有前缀的属性，导致问题。解决方案包括使用注释控制Autoprefixer的行为，或者改用内联样式。这些信息需要整理到回答中，但用户当前的问题主要是属性的解释，所以解决方案部分可以简要提及，并引导用户参考相关引用。最后，生成相关问题时要围绕该属性的应用、问题解决和兼容性等方面。确保问题与用户可能进一步询问的内容相关，比如优化方法、兼容性处理等。</think>### CSS属性`-webkit-box-orient: vertical`解释 `-webkit-box-orient: vertical`是WebKit内核浏览器（如Chrome、Safari）的私有CSS属性，用于控制弹性盒子（Flexbox）的子元素在容器中的排列方向。其作用是将子元素沿**垂直方向**依次排列[^4][^5]。 #### 核心功能 1. **垂直布局**：设置容器内子元素的排列方向为垂直方向（从上到下），例如： $$ \text{容器} \rightarrow \begin{cases} \text{子元素1} \\ \text{子元素2} \end{cases} $$ 2. **多行文本截断**：结合`-webkit-line-clamp`属性，可实现多行文本超出时显示省略号的效果[^2][^4]。例如： ```css .text { display: -webkit-box; -webkit-line-clamp: 2; /* 显示两行 */ -webkit-box-orient: vertical; /* 垂直排列 */ overflow: hidden; } ``` #### 注意问题 - **编译后丢失**：使用Webpack等工具打包时，可能会因Autoprefixer优化导致该属性被移除。解决方案包括： 1. 添加注释阻止Autoprefixer处理： ```css /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ ``` 2. 改用内联样式（不推荐，但可临时解决）[^1][^3]。 #### 兼容性 - 仅适用于WebKit内核浏览器（如Chrome、Safari），需配合`display: -webkit-box`使用[^2]。