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;