如果實(shí)現(xiàn)單行文本的溢出顯示省略號(hào)同學(xué)們應(yīng)該都知道用text-overflow:ellipsis屬性來歼指,當(dāng)然還需要加寬度width屬來兼容部分瀏覽卖丸。
實(shí)現(xiàn)方法:
css:
p {
width: 100px;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
代碼:
<p>我這里有好長好長的一段文字啊糠悯,可能需要顯示一個(gè)省略號(hào)才行啊</p>
效果:
1623053017(1).jpg
但是這個(gè)屬性只支持單行文本的溢出顯示省略號(hào)帮坚,如果我們要實(shí)現(xiàn)多行文本溢出顯示省略號(hào)呢。
接下來重點(diǎn)說一說多行文本溢出顯示省略號(hào)互艾,如下:
css:
p {
width: 100px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
代碼:
<p>我這里有好長好長的一段文字啊试和,可能需要顯示一個(gè)省略號(hào)才行啊</p>
效果:
1623053266(1).jpg