原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. C# Azure 设置云端应用程序的默认时间

    在微软云Azure中,应用程序(website)的默认时间是按照美国UTC的时间的. 例如,在应用程序中获取DateTime.Now,的时候,是获取UTC的时间,不是中国的时间. 所以我们开始在这里设 ...

  2. 表格行与列mouse经过时高亮显示

    Insus.NET有在asp.net mvc应用程序,练习jQuery与css时,实现了<表格行mouse经过时高亮显示>http://www.cnblogs.com/insus/p/37 ...

  3. Android studio删除工程项目

    本新手最近学Android都是用的eclipse.其实个人觉得eclipse不错,可能接触Android不久,倒也不觉得它慢还是怎样.对于Google的Android studio也是早有耳闻,前两天 ...

  4. 使用ScheduledExecutorService实现任务延迟

    在做项目的过程中,遇到一个场景:在审批流中,如果上级领导不审批,则在10分钟后自动审批.也就是要做一个任务在多长时间后执行的效果 在不断的摸索中,想到了使用线程池,发现有个ScheduledExecu ...

  5. jQuery在线引用地址(全)

    转:https://www.cnblogs.com/lmyau/p/7736269.html 1.官网jquery压缩版引用地址: 3.1.1版本: <script src="http ...

  6. 使用Druid网上监控

    0.添加依赖 <!--druid连接池--> <dependency> <groupId>com.alibaba</groupId> <artif ...

  7. 最新版本Bootstrap样式很奇怪(4.1版本)

    下载最新版4.1版的Bootstrap编译好的CSS,引入的样式及其怪异. 这种情况重新下载3.3.7低版本就可以了.

  8. layer弹出框确定前验证:弹出消息框(弹出两个layer)

    作者QQ:1095737364 QQ群:123300273 欢迎加入! layer 弹出框中经常遇到要弹出表单进行修改数据, 因此在弹出框中的表单需要验证数据, 就需要在弹出一个layer, 默认的设 ...

  9. 18:Tomorrow never knows?

    18:Tomorrow never knows? 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 甲壳虫的<A day in the life>和 ...

  10. javaSE中JDK提供的四种线程池

    对javaSE中JDK提供的四种线程池稍作整理   一.Executor   package java.util.concurrent; /** * @since 1.5 * @author Doug ...