css多行省略-webkit-box-orient打包编译后失效原因
原css代码:
.dialog-for-plan .dialog-table .type>p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp:;
overflow: hidden;
}
打包上线后代码:
.dialog-for-plan .dialog-table .type>p {
display: -webkit-box;
-webkit-line-clamp:;
overflow: hidden;
}
原因:编译时会自动过滤掉 -webkit-box-orient: vertical
解决办法:
.dialog-for-plan .dialog-table .type>p {
display: -webkit-box;
-webkit-line-clamp:;
overflow: hidden;
/*! autoprefixer: off */
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
/*! autoprefixer: on */
}
需要注意的是autoprefixer前面有个“!”。
需要注意的是autoprefixer前面有个“!”。
需要注意的是autoprefixer前面有个“!”。
css多行省略-webkit-box-orient打包编译后失效原因的更多相关文章
- css多行省略
单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成 ...
- css多行省略和单行省略
实现文本省略: <!-- html代码 --> <p class="single">该文的主题思想即对自由境界的向往.朱自清当时虽置身在污浊黑暗的旧中国,但 ...
- CSS 多行省略失效 (-webkit-box-orient 失效) Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
webpck不能编译这个属性-webkit-box-orient: vertical https://github.com/fanyifanbumaimeng/Articles/issues/48 / ...
- vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题
最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...
- vue打包项目后使用-webkit-line-clamp: 2;这个属性不生效?
在项目中要实现多行省略,-webkit-line-clamp: 2;打包后不生效,使用下面的方法: word-break: break-all; text-overflow: ellipsis; di ...
- 纯 CSS 自定义多行省略:从原理到实现
文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开 ...
- 你不知道的css高级应用三种方法——实现多行省略
前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...
- 黑科技:CSS定制多行省略
转载请注明出处:http://hai.li/2017/03/08/css-multiline-overflow-ellipsis.html 什么是多行省略? 当字数多到一定程度就显示省略号点点点.最初 ...
- 黑科技:纯CSS定制文本省略
作者:weilong,腾讯 web前端开发 工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest导读 拿到设计MM的设计稿,Oh NO,点点点后面又双叒叕加内容了,弹丸 ...
随机推荐
- Re:从零开始的Spring Session(三)
上一篇文章中,我们使用Redis集成了Spring Session.大多数的配置都是Spring Boot帮我们自动配置的,这一节我们介绍一点Spring Session较为高级的特性. 集成Spri ...
- 设计模式学习--面向对象的5条设计原则之开放封闭原则--OCP
一.OCP简介(OCP--Open-Closed Principle):Software entities(classes,modules,functions,etc.) should be open ...
- EF访问数据库报“ExecuteReader 要求已打开且可用的 Connection。连接的当前状态为已关闭。”错误
我发生这个问题的原因是因为我用EF访问数据库时用的用到了两用方式,如下图 第一种方式访问时不会出现此错误,出现错误的是第二种方式,下图是dal层代码 其中红框中的代码是出现错误之后改正的代码,也就是说 ...
- Tomcat服务器的安装配置图文教程(推荐)
现在将使用Tomcat的一些经验和心得写到这里,作为记录和备忘.如果有朋友看到,也请不吝赐教. 1.首先是Tomcat的获取和安装. 获取当然得上Apache的官方网站下载,开源免费,而且带宽也足够. ...
- 【Java基础】6、java中使用switch-case的用法及注意事项超全总结
1.switch-case注意事项: switch(A),括号中A的取值只能是整型或者可以转换为整型的数值类型,比如byte.short.int.char.还有枚举:需要强调的是:long和Strin ...
- 撩课-Java每天5道面试题第19天
126.Struts2中的拦截器有什么用?列举框架提供的拦截器名称? )拦截器是struts2核心组成部分, 它提供了一种机制,使得开发者 可以定义一个特定的功能模块, 这个模块会在Action执行之 ...
- php面向对象精要(3)
1,final关键字定义的方法,不能被重写 由于final修饰了show方法,子类中重写show方法会报错 <?php class MyClass { final function show() ...
- python 递归和二分法
一 内置函数 1. revserd 翻转,返回的是迭代器 # 将 s 倒置 s = '不是上海自来水来自海上' # 方法一 print(s[::-1]) # 方法二 s1 = reversed(s) ...
- JS写的二级导航栏(利用冒泡原理)
今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...
- 安装php扩展包
sudo apt-get install php5-gd curl libcurl3 libcurl3-dev php5-curl 重启Apache sudo service apache2 rest ...