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;