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;