css虽然简单,但其实也是记得常用的那些,不常用的还是要搜一搜再写?♀️
遇到了一个有意思的css问题,之前写过一行超出隐藏,倒是没写过多行超出隐藏
虽然很细节,但还是记一下备忘
一行一般是这么写的
p{ width:100px; overflow:hidden; white-space:no-wrap; text-overfow:ellipsis; }
但如果是多行,想要实现图二的效果,这样写是无法实现的
图1是两行文字,没有超出
图2 超出两行
<p>我超过两行啦啦啦哈哈哈娃哈哈哇哈哈就是我我我我哈</p>
css 用到了一个display:-webkit-box;的属性来实现
p{ width:100px; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
貌似这个只兼容webkit浏览器内核的,所以用的时候如果有兼容要求的话要注意
其他---加记一个css问题:自定义虚线的间距
设计图经常会有虚线连接线,但虚线的长度密集程度就不一样,border不能够满足美观需求,这时候可以用背景来画
width: 100%;
height: 1px;
background-image: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
background-size: 8px 1px;
background-repeat: repeat-x;