CSS 多行省略失效 (-webkit-box-orient 失效) Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.

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: hidd…

css多行省略

单行省略就不用说了,用css实现非常简单,兼容性还非常好.但是多行省略一直都是前端的痛点,在css3之前,可以用js去算两行能放多少个字,把多余的字用 ... 代替,且不说好不好,万一哪天PM说要改成3行,UI说这个字体改大一点,又得去算一遍,可谓是苦不堪言. 好在有css3,css3提供了实现完美的多行省略方法,本文已scss为例 @mixin ellipsis($lineCount: 2) { text-overflow: -o-ellipsis-lastline; overflow: hi…

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 /* autoprefixer: ignore next */ -webkit-box-orient: vertical;…

css多行省略和单行省略

实现文本省略:  <p class="single">该文的主题思想即对自由境界的向往.朱自清当时虽置身在污浊黑暗的旧中国,但他的心灵世界则是一片澄澈明净,他的精神依然昂奋向上.朱自清把他健康高尚的审美情趣,把他对美好事物的无限热爱,将他对人生理想的不懈追求熔铸到文章中去.熔铸到诗一样美丽的语言中去.从而使整篇文章洋溢着浓浓的诗意,产生了经久不衰的艺术魅力<p> /*css代码*/ /*单行*/ .single{ tex…

纯 CSS 自定义多行省略：从原理到实现

文字溢出怎么展示,你的需求是什么?单行还是多行?截断,省略,自定义样式,自适应高度?在这里你都能找到答案.接下来我会由浅入深,从原理到实现,带你一步步揭开多行省略的面纱.我们先从最简单的单行溢出省略开始, 热身,单行省略这是一个全宇宙统一的方案,没有太多的魔法 /* 原理:设置文字不换行,溢出后隐藏,截断显示省略符 */ .ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 如何实现多行省略呢…

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

前言这是个老掉牙的需求啦,不过仍然有很多人在网上找解决方案,特别是搜索结果排名靠前的那些,都是些只会介绍兼容性不好的使用-webkit-line-clamp的方案. 如果你看到这篇文章,可能代表你正是从那么多千篇一律的文章中跳转过来的,想找更好地方案的.那恭喜你,没有更好的,只有更合不合适的,当然,前提是我的文章流量够多,能被顶上去你才有机会看到. 这里介绍三种多行文本截断的方法,当然第一种就是你看到想吐的-webkit-line-clamp方案,不想看就直接跳到第二种方法开始看啦. 使用-w…

黑科技：CSS定制多行省略

转载请注明出处:http://hai.li/2017/03/08/css-multiline-overflow-ellipsis.html 什么是多行省略? 当字数多到一定程度就显示省略号点点点.最初只是简单的点点点,之后花样越来越多,点点点加下箭头,点点点加更多,点点点加更多加箭头....多行省略就是大段文字后面的花式点点点. 同行这么做: Google Plus用透明到白色的渐变遮罩,渐变遮罩在文字超出的时候才显示,但无法挤出文字,且背景只能纯色,不理想. 豌豆荚则更简单粗暴换行显示,换行显…

黑科技：纯CSS定制文本省略

作者:weilong,腾讯 web前端开发工程师商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处. WeTest导读拿到设计MM的设计稿,Oh NO,点点点后面又双叒叕加内容了,弹丸之地,劳心费神啊!!可怜我们UI开发GG每次苦口婆心说,微臣不是不做,是办不到啊!很是愧疚.而现在,自从用了定制多行省略,腰不酸了,手也不疼了,接起需求来,毫不费劲! 一.什么是多行省略? 当字数多到一定程度就显示省略号点点点.最初只是简单的点点点,之后花样越来越多,点点点加下箭头,点点点加更多,点…

css多行显示省略号

首先说css多行显示省略号和单行文本省略号: 我们知道,单行显示省略号时,我们首先需要设置容器的宽度width:value(具体的值),然后强制文本在一行内显示,即white-spacing:nowrap:再然后,溢出内容为隐藏,overflow:hidden:第四步:溢出文本显示省略号,即text-overflow:ellipsis:完成这四步即可实现单行文本省略号. 多行文本省略号:代码如下 display: -webkit-box;-webkit-box-orient:vertical;t…

CSS魔法堂：小结一下Box Model与Positioning Scheme

前言对于Box Model和Positioning Scheme中3种定位模式的细节,已经通过以下几篇文章记录了我对其的理解和思考. <CSS魔法堂:重新认识Box Model.IFC.BFC和Collapsing margins> <CSS魔法堂:你一定误解过的Normal flow> <CSS魔法堂:Absolute Positioning就这个样> <CSS魔法堂:说说Float那个被埋没的志向> 深入细节后会发现3中定位模式之间,Box…

CSS设置行内元素和块级元素的水平居中、垂直居中

CSS设置行内元素的水平居中 div{text-align:center} /*DIV内的行内元素均会水平居中*/ CSS设置行内元素的垂直居中 div{height:30px; line-height:30px} /*DIV内的行内元素均会垂直居中*/ PS:当然,如果既要水平居中又要垂直居中,那么综合一下 div{text-align:center; height:30px; line-height:30px} CSS设置块级元素的水平居中 div p{margin:0 auto; widt…

多行文本省略号样式失效丢失，以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'

问题现象使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了.查阅资料,有不少人提出在改样式前后添加注释(后处理程序): /*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */ 再次打包,发现样式恢复正常.然后控制台却多出一条警告:'(Emitted value instead…

解决Virtual Box 安装Mac OS X当出现“hfs: summary table not allowed on FS with block size of 2048”问题

解决Virtual Box 安装Mac OS X当出现"hfs: summary table not allowed on FS with block size of 2048"问题安装的时候首先出现 hfs: summary table not allowed on FS withblock size of 2048 错误.然后就是 hfs: could not initializc summary table forOSX Base System 错误. 一開始也不知道是怎么回事…

让CSS某行不失效

比如百度的分享代码 <div id="bdshare" class="bdshare_t bds_tools get-codes-bdshare">已经定义好了CSS,我想用自己的CSS,但是去掉bdshare_t bds_tools get-codes-bdshare,分享代码就失效了,我想让bdshare_t bds_tools get-codes-bdshare不执行CSS的部分解决办法: 这个是css样式的优先级问题,可以在自己的css样式里面…

关于css实现单行、多行省略标记

实现单行: overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 实现多行: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; -webkit-line-clamp文本显示行数:需要结合一下属性进行使用: display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模…

css 控制行数多出的省略

<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <style> .test{ -webkit-line-clamp: 3; /*限制3行*/ -webkit-box-orient: vertical; text-overflow: ellipsis;…

CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

前言盒子模型作为CSS基础中的基础,曾一度以为掌握了IE和W3C标准下的块级盒子模型即可,但近日在学习行级盒子模型时发现原来当初是如此幼稚可笑.本文尝试全面叙述块级.行级盒子模型的特性.作为近日学习的记录. 何为盒子模型? 盒子模型到底何方神圣居然可以作为CSS的基础?闻名不如见面,上图了喂! 再来张切面图吧! 下面我们以 <div></div> 为栗子. <div></div> 标签被浏览器解析后会生成div元素并添加到document t…

css设置中文字体(font-family:"黑体")后样式失效问题

做项目时偶遇的一诡异问题,同样的代码,在ff和IE7以上页面显示正常,但IE6无论怎么改都不起作用,本来以为是IE6的某些浮动bug所致,结果弄了很长时间也不行,后来不经意间把原来设定的font-family: "黑体"属性去掉了,一切恢复正常...到网上搜了下,还真有不少人遇到同样的问题,下面摘录一段: css文件里font-family: "黑体";这句会导致后面的css定义全部不起作用了.只要把font-family: "黑体";改成fon…

CSS躬行记（9）——网格布局

网格布局(Grid Layout)也叫栅格布局,与表格布局类似,也依赖行和列.但与之不同的是,网格布局能直接控制HTML文档中元素的顺序.位置和大小等,而不用再借助辅助元素. 一.术语下图展示了CSS规范中定义的网格. (1)网格容器(grid container)由display属性的两个特殊值(grid和inline-grid)所创建,由于它不是块级容器,因此其布局不受浮动和外边距塌陷的影响. (2)网格项(grid item)也叫网格元素,是网格容器的子元素,注意,它的后代元素不是网格项…

深入了解css的行高Line Height属性

什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. 不过,行间距与半行间距,还是取决于CSS中的line-height.那么,如何来使用line-height呢? 默认状态,浏览器使用1.0-1.2 line-height, 这是一个初始值.你可以定义line-height属性来覆盖初始值:p{line-height:140%} 你可以有5种方式来定…

CSS溢出文本省略（text-overflow）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> dl{ width:240px; border: solid 1px #ccc; } dt{ padding:8px 8px; background: #7fecad; font-size: 13px…

CSS多行文字截断

有时候容器的宽度是固定的,但要显示的文字有点多,就需要将多余的文字隐藏,而且为了表示还有字没有显示,用省略号表示. 类似这样: 单行文字单行文字截断比较明显: .truncate { width: 250px; /* or max-width */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 多行文字多行文字截断就比较棘手,比如对于下面的代码段: <div class="module"&g…

行内脚本的位置放置----css阻塞行内脚本

行内脚本:避免放置在css和其他资源之间. 若在head中,最好放在css样式表之前,如果放置在样式表之后,会引起css阻塞. css阻塞:由于浏览器要保证css和JavaScript的执行顺序,css之后如果有js,浏览器会先等待css下载执行完毕,再去执行这部分行内的js脚本(这是因为行内脚本可能含有依赖样式表中的样式),而脚本的执行也会阻塞后续资源的加载,从而出现css阻塞.所以,一般要将行内脚本放在css之前.这样css就可以和其他资源并行下载了,不会出现阻塞现象.…

CSS多行文字垂直居中的两种方法

之前写过一篇关于:CSS左右居中对齐的文章,里面提到的两种方法其实也可以引申为垂直居中对齐.写这篇文章是因为要兼容IE6.IE7的问题,我们都知道一行文字时可以通过line-height来设置垂直居中,如果是多行这个肯定不行,而我的同事因为这个用了js来实现居中对齐,我觉得这是很难理解的.故而整理这篇文章. HTML代码: <div class="middle-box"> <div class="middle-inner"> <p>…

css实现行内文字垂直居中

之前本人一直使用浮动.相对定位.绝对定位和display:table等css的方法进行定位.网上得知flex可实现弹性布局,符合未来发展趋势,随尝试. 1:让盒子行内文字垂直居中,解决思路是讲文字的行高设置为盒子的高度. p { border:#333333 solid 1px; height:50px; line-height:50px; margin-bottom:30px; } 2:让盒子行内文字垂直居中,解决思路是对盒子的高度设定,然后对盒子的padding-top和padding-bo…

CSS躬行记（1）——CSS基础拾遗

一.box-decoration-break CSS3新增的box-decoration-break属性可指定行内非替换元素在跨行.跨列或跨页时的样式渲染,它包含两个值: (1)slice:默认值,盒子会被分割成多部分. (2)clone:断开的各个盒子会单独渲染. 下面用一个示例来演示两种的区别,第一个span元素采用box-decoration-break的默认值,效果如第一张图所示,在断行处没有左右内边距和圆角:第二个span元素box-decoration-break的值为clone,效…

【CSS 多行省略失效 (-webkit-box-orient 失效) Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.】的更多相关文章

css多行省略-webkit-box-orient打包编译后失效原因

css多行省略

CSS 多行省略失效 (-webkit-box-orient 失效) Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.

css多行省略和单行省略

纯 CSS 自定义多行省略：从原理到实现

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

黑科技：CSS定制多行省略

黑科技：纯CSS定制文本省略

css多行显示省略号

CSS魔法堂：小结一下Box Model与Positioning Scheme

CSS设置行内元素和块级元素的水平居中、垂直居中

多行文本省略号样式失效丢失，以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'

解决Virtual Box 安装Mac OS X当出现“hfs: summary table not allowed on FS with block size of 2048”问题

让CSS某行不失效

关于css实现单行、多行省略标记

css 控制行数多出的省略

CSS魔法堂：重新认识Box Model、IFC、BFC和Collapsing margins

css设置中文字体(font-family:"黑体")后样式失效问题

CSS躬行记（9）——网格布局

深入了解css的行高Line Height属性

CSS溢出文本省略（text-overflow）

CSS多行文字截断

行内脚本的位置放置----css阻塞行内脚本

CSS多行文字垂直居中的两种方法

css实现行内文字垂直居中

CSS躬行记（1）——CSS基础拾遗

CSS躬行记（4）——浮动形状

CSS躬行记（8）——裁剪和遮罩

CSS基础-行快属性，hover

CSS基础行内元素/行内块元素设置垂直对齐方式及常见使用案例