webpck不能编译这个多行文本溢出属性-webkit-box-orient: vertical,自动隐藏

最新推荐文章于 2023-12-19 14:32:35 发布
最新推荐文章于 2023-12-19 14:32:35 发布
阅读量1.4k 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39635302/article/details/79915712
版权

optimize-css-assets-webpack-plugin这个插件的问题

注释掉webpack.prod.conf.js中下面的代码

new OptimizeCSSPlugin({
  cssProcessorOptions: config.build.productionSourceMap
    ? { safe: true, map: { inline: false } }
    : { safe: true }
}),
1241461622
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
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
这个属性丢失，导致了不生效，在Styles里把这个属性加上就好了，于是断定是编译过程导致这个属性丢失。 二、解决办法 网上找了一个可行的解决方案，把autoprefixer关掉，有一种写法： /*! autoprefixe
如何解决CSS中-webkit-box-orient: vertical属性编译后丢失问题
Anony_me的博客
06-15 3345
一、起因需求要求展示两行，多余的文字用三个点替代，于是用了这几个不太规范的属性 后来发现代码里写的好好的，一到页面上居然没有反应，和没写一个样，f12看了下，原来是这个属性丢失，导致了不生效，在Styles里把这个属性加上就好了，于是断定是编译过程导致这个属性丢失。二、解决办法网上找了一个可行的解决方案，把autoprefixer关掉，有一种写法： 这样确实解决了编译丢失的情况，但会在编译过程中报warning，最后到GitHub上找到最佳解决方案,如下 问题解决，也不报warning了。...
VUE / css -webkit-box-orient: vertical 打包放到线上不显示
Lear的博客
06-01 258
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 属性编译或打包后丢失问题
最新发布
高宇辰
12-19 321
最近在写项目的时候遇到一个问题，需求是表格中的备注字段只显示2行，超出显示…，鼠标悬浮显示完整。;
解决CSS中-webkit-box-orient: vertical属性编译后丢失问题
weixin_49523082的博客
06-12 624
解决CSS中-webkit-box-orient: vertical属性编译后丢失问题
移动端的text-overflow多行文本溢出显示省略号(…)
12-10
在移动端，`text-overflow: ellipsis` 属性常用于单行文本溢出时显示省略号，但其本身并不支持多行文本的处理。本文将探讨如何在不同场景下实现多行文本溢出显示省略号的效果。 首先，对于基于WebKit的浏览器（如...
css3弹性布局-webkit-box的用法演示
11-04
`-webkit-box-orient`属性定义了主轴的方向，可以是`horizontal`（水平）或`vertical`（垂直）。它与`-webkit-box-direction`配合使用，共同决定子元素的排列方式。 三、`-webkit-box-pack` `-webkit-box-pack`属性...
orientdb-schema-to-json-schema:将OrientDB模式转换为JSON模式
05-12
从OrientDB架构到JSON架构 请参阅。 如何 首先，将您的OrientDB凭证写入orientjs.opts。 请参阅orientjs.opts.example或orientjs帮助。 npm i node index [json schema id prefix] 默认json schema id prefix为./...
aws-lambda-image-auto-orient:可根据EXIF数据自动定位jpeg图像的微服务
05-16
标题中的“aws-lambda-image-auto-orient”是一个利用AWS Lambda服务构建的微服务，它的主要功能是自动调整JPEG图像的方向，根据的是图像的EXIF（Exchangeable Image File Format）数据。EXIF信息通常包含了照片拍摄...
CSS高级
m0_72454242的博客
08-05 423
css基础知识
自适应布局webkit-box的用法
m0_72200584的博客
02-01 1625
自适应布局webkit-box的用法
关于CSS3的一些冷门属性
waiting_area的博客
02-20 189
能够加载服务器的字体文字，让客户端显示客户端没有安装的字体 语法: @font-face{ • font-family:<你的web字体的名称>; src：url(“字体路径”); font-weight:bold; } @font-face{ /*定义字体*/ font-family:"我的字体"; src:url("font/CooperBlackStd.otf"); } div{ font-family: "我的字体"; /*
解决-webkit-box-orient: vertical在webpack打包后丢失问题
高先生的猫
09-29 690
问题描述 在项目中需要使用多行文本溢出显示省略号(…)的时候，首先想到的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 5028
先说明问题是什么，出现的状况是 -webkit-box-orient: vertical这个属性在本地运行是存在的，但是打包后放到线上这个属性消失了； 问题出现原因：打包时这个属性和注释混在了一起（个人猜测） 解决办法：下面每种都可解决，根据个人需求随意挑选 1.直接在行内加 -webkit-box-orient: vertical（虽然管用但是我的项目需要添加的这个太多了，所以我选择...
webpack编译-webkit-box-orient: vertical 消失问题解决方案
我叫陈小皮。
05-04 1228
/! autoprefixer: off / -webkit-box-orient: vertical; /* autoprefixer: on */
-webkit-box-orient不见了， webkit 和 autoprefixer 的坑
hao像飘在外太空的博客
03-30 6955
autoprefixer autoprefixer不仅会帮你加-webkit-之类的prefixer， 它还会帮你删除你自己写在 css/sass/less里的样式， 真是厉害了 关闭autoprefixer的自动删除功能，这样： /* autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ ...
164Echarts - 桑基图（Sankey Orient Vertical）
阿甘兄
05-05 1523
效果图 源代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="js/echarts.min.js">&l...
-webkit-line-clamp 实现限制文字显示多行，多余的用...代替
热门推荐
cyj_sky的博客
10-11 1万+
-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性： display: -webkit-box：必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 -webkit-box
-webkit-box-orient: vertical; -webkit-line-clamp: 2;
07-13
-webkit-box-orient: vertical; 是一个WebKit浏览器私有的CSS属性，用于设置布局盒子的排列方向为垂直方向。它通常与其他属性一起使用，例如 flex 或者 -webkit-flex。 -webkit-line-clamp: 2; 也是一个WebKit...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值