原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打包编译后失效原因的更多相关文章

  1. css多行省略

    单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成 ...

  2. css多行省略和单行省略

    实现文本省略: <!-- html代码 --> <p class="single">该文的主题思想即对自由境界的向往.朱自清当时虽置身在污浊黑暗的旧中国,但 ...

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

  4. vue项目中打包编译后,CSS样式【-webkit-box-orient: vertical】打包后丢失问题

    最近在做vue项目的时候页面处理多行文本样式时用到了-webkit-box-orient: vertical这个属性,本地跑项目没问题,但是打包放到服务器后发现这个属性丢失了.如下图: 后来在网上查了 ...

  5. vue打包项目后使用-webkit-line-clamp: 2;这个属性不生效?

    在项目中要实现多行省略,-webkit-line-clamp: 2;打包后不生效,使用下面的方法: word-break: break-all; text-overflow: ellipsis; di ...

  6. 纯 CSS 自定义多行省略:从原理到实现

    文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开 ...

  7. 你不知道的css高级应用三种方法——实现多行省略

    前言 这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正 ...

  8. 黑科技:CSS定制多行省略

    转载请注明出处:http://hai.li/2017/03/08/css-multiline-overflow-ellipsis.html 什么是多行省略? 当字数多到一定程度就显示省略号点点点.最初 ...

  9. 黑科技:纯CSS定制文本省略

    作者:weilong,腾讯 web前端开发 工程师 商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest导读 拿到设计MM的设计稿,Oh NO,点点点后面又双叒叕加内容了,弹丸 ...

随机推荐

  1. ConcurrentHashMap 扩容分析拾遗

    前言 这是一篇对 transfer 方法的拾遗,关于之前那篇文章的一些一笔带过,或者当时不知道的地方进行回顾. 疑点 1. 为什么将链表拆成两份的时候,0 在低位,1 在高位? 回顾一下 transf ...

  2. 并发编程之 CyclicBarrier 源码分析

    前言 在之前的介绍 CountDownLatch 的文章中,CountDown 可以实现多个线程协调,在所有指定线程完成后,主线程才执行任务. 但是,CountDownLatch 有个缺陷,这点 JD ...

  3. Mybatis 的配置xml和properties放在jar包以外的一种方法

    1.问题 开发时候,将xml和properties放resources,直接可以访问到,然而打包后这两个文件也一同被打包到jar包里面,如果发布后想修改就会比较麻烦,所以希望将xml配置文件和prop ...

  4. HTML5 FileReader实现图片上传前预览

    如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...

  5. 【C#数据结构系列】查找

    一:查找 1.1 基本概念和术语 查找(Search)是在数据结构中确定是否存在关键码等于给定关键码的记录的过程.关键码有主关键码和次关键码.主关键码能够唯一区分各个不同的记录,次关键码通常不能唯一区 ...

  6. ThinkPHP_5对数据库的CURL操作

    Db::query();Db::execute(); Db::table()->select(); 所有数据,二维数组,结果不存在时返回空数组Db::table->find(); 一条数据 ...

  7. avalonjs 中的if else实现的几种方法

    在学习avalonjs的过程中,发现模板中并没有if else这样的写法,不像tempalte ejs这些,所以总结了三种方法来实现,仅供在使用avalonjs的同学参考,主要是通过ms-if 表达式 ...

  8. 【代码笔记】iOS-HTTPQueue下载图片

    一,工程图. 二,代码. ViewController.h #import <UIKit/UIKit.h> #import "ASIHTTPRequest.h" #im ...

  9. 【代码笔记】iOS-在Block中修改外部变量值的

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, ...

  10. Python 基于python实现ADSL宽带帐号,密码的获取及宽带拨号

    基于python实现ADSL宽带帐号的获取及宽带拨号     基本思想: 1.研究上网方式(实验环境为电信网线接入式ADSL,拨号方式PPPOE) 2.研究宽带帐号和密码生成规律(实验环境,宽带帐号为 ...