css 多行文字，超出部分隐藏，...代替

 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;