樂陵最新疫情最新消息寧波seo網(wǎng)頁怎么優(yōu)化
語法：
text-overflow:clip |? ellipsis
默認(rèn)值為clip 不顯示省略標(biāo)記
clip:當(dāng)前對象內(nèi)文本溢出時不顯示省略標(biāo)記,而是將溢出部分裁剪。
ellipsis:當(dāng)對象內(nèi)文本一處時顯示省略標(biāo)記(...)。
一、常見的單行文本溢出顯示省略寫法：
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style type="text/css">.p{width: 100px;height: 40px;line-height: 40px;text-overflow: ellipsis; /*1*/overflow: hidden; /*2*/white-space: nowrap; /*3*/word-break: break-all;}</style><body><p class="p">多行文本溢出顯示多行文本溢出顯示多行文本溢出顯示</p></body>
</html>
二、多行文本溢出?
WebKit瀏覽器有一個-webkit-line-clamp的屬性，用這個即可以實現(xiàn)webkit內(nèi)核的瀏覽器、以及大部分移動端的多行文本溢出省略號；
display:-webkit-box;
-webkit-line-clamp: 3/*第幾行裁剪*/
-webkit-box-orient:vertical;
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style type="text/css">.p {height: 60px;line-height: 30px;width: 80px;overflow : hidden;text-overflow: ellipsis;display: -webkit-box; /*1*/-webkit-line-clamp: 2; /*2*//*第幾行裁剪*/-webkit-box-orient: vertical; /*3*/} </style><body><p class="p">多行文本溢出顯示多行文本溢出顯示多行文本溢出顯示多行文本溢出顯示多示</p></body>
</html>
其它瀏覽器的話就需要通過js實現(xiàn)：
<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><style type="text/css">div{height: 60px;}p {line-height: 30px;width: 80px;margin: 0 auto;}</style><body><div id="div"><p id="p">多行文本溢出顯示多行文本溢出顯示多行文本溢行文本溢示</p></div></body><script type="text/javascript">var eleH = document.getElementById("div").clientHeight;var pEle = document.getElementById("p");while(pEle.clientHeight > eleH) {pEle.innerText = pEle.innerText.replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...");};</script>
</html>
?