原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. Razor 中的@rendersection

    在使用布局页时,可以指定页面中某处的渲染,具体的用@rendersection来做.如在布局页中要渲染一段自定义的脚本, @RenderSection("scripts", req ...

  2. angularjs学习第二天笔记---过滤器

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  3. Computer - 在VM7虚拟机中使用主机打印机

    在VM7虚拟机中使用主机打印机 在VMware Workstation 7中提供了一项新的功能:虚拟机可以直接使用主机的打印机.在以前的版本中,如果想在虚拟机中使用主机的打印机,一般是在主机创建“打印 ...

  4. 求解方程A5+B5+C5+D5+E5=F5

    方程A5+B5+C5+D5+E5=F5刚好有一个满足0<A≤B≤C≤D≤E≤F≤75的整数解.请编写一个求出该解的程序: using System; namespace ReverseTheEx ...

  5. 【 js 性能优化】【源码学习】underscore throttle 与 debounce 节流

    在看 underscore.js 源码的时候,接触到了这样两个方法,很有意思: 我先把实现的代码撂在下面,看不懂的可以先跳过,但是跳过可不是永远跳过哦- 一个是 throttle: _.throttl ...

  6. 第二十七天- 网络通信协议 TCP UDP 缓冲区

    1.网络通信协议 osi七层模型:按照分工不同把互联网协议从逻辑上划分了层级 socket层 2.理解socket: Socket是应用层与TCP/IP协议族通信的中间软件抽象层,它是一组接口.在设计 ...

  7. Canvas:飞机大战 -- 游戏制作

    Canvas:飞机大战 最开始我们要初始化信息,我们有五个状态:游戏封面,加载状态,运行状态,游戏暂停,游戏结束. 我们还需要  得分--score,生命--life. var START = 1;/ ...

  8. 自定义多选框(checkbox)和单选框(radio)css样式

    直接上代码: input[type="radio"],input[type="checkbox"]{ -webkit-appearance: none; out ...

  9. css3 之 display 属性

    1.定义 语法:display:none | inline | block | list-item | inline-block | table | inline-table | table-capt ...

  10. js的style.display小问题

    在元素添加class样式隐藏display:none; 使用console.log(xx.style.display);//空值