CSS 多行文本隱藏通常使用以下兩種方法:
- 使用
text-overflow: ellipsis
屬性截?cái)喑鑫谋救萜鲗挾鹊奈谋荆⒃谀┪蔡砑邮÷蕴?hào)。 - 使用
overflow: hidden
和white-space: nowrap
隱藏超出文本容器寬度的文本。
下面是使用第一種方法的示例:
.text {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
下面是使用第二種方法的示例:
.text {
width: 200px;
white-space: nowrap;
overflow: hidden;
}
需要注意的是,以上兩種方法只適用于單行文本或無(wú)法自動(dòng)換行的文本,如果需要隱藏多行文本,可以使用 CSS3 的新特性:display: -webkit-box
與-webkit-line-clamp
。
.text {
display: -webkit-box;
-webkit-line-clamp: 3; /* 顯示行數(shù) */
-webkit-box-orient: vertical;
overflow: hidden;
}
以上代碼將會(huì)隱藏文本容器內(nèi)超出三行的多余內(nèi)容。