时间:2021-05-08
一、起因
需求要求展示两行,多余的文字用三个点替代,于是用了这几个不太规范的属性
display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;后来发现代码里写的好好的,一到页面上居然没有反应,和没写一个样,f12看了下,原来是-webkit-box-orient: vertical;这个属性丢失,导致了不生效,在Styles里把这个属性加上就好了,于是断定是编译过程导致这个属性丢失。
二、解决办法
网上找了一个可行的解决方案,把autoprefixer关掉,有一种写法:
-webkit-box-orient: vertical;这样确实解决了编译丢失的情况,但会在编译过程中报warning,最后到GitHub上找到最佳解决方案,如下
-webkit-box-orient: vertical;问题完美解决,也不报warning了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
在很久之前的一篇文章,有讲到-webkit-box-reflect这个属性--从倒影说起,谈谈CSS继承inherit-webkit-box-reflect是一
方法一:使用CSS溢出省略的方式解决解决效果如下:css代码:display:-webkit-box;display:-moz-box;white-space:
基础知识语法:box-sizing:content-box|border-box|inherit相关属性:无取值:content-box:此值维持css2.1盒
CSS3中的box-sizing(content-box与border-box)CSS3中的box-sizing属性允许以特定的方式来指定盒模型,有两种方式:c
CSS里面的属性很多,有些属性长时间不用,就容易忘,尤其是那种需要设置多个值的属性。比如:box-shadow,每次使用CSS3里的box-shadow,都记不