CSS 可以通過設置文本溢出時顯示省略號來幫助在限定寬度的容器內顯示更多的文本內容。我們可以使用text-overflow
屬性來實現這一效果。
如果希望只顯示一行文本內容,并在末尾添加省略號,可以結合white-space
屬性使用:
p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
其中,white-space: nowrap;
表示不換行,overflow: hidden;
表示超出容器時隱藏內容,text-overflow: ellipsis;
表示顯示省略號。
如果希望顯示多行文本內容,并在末尾添加省略號,可以結合display: -webkit-box;
和-webkit-line-clamp
屬性使用:
p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; }
其中,display: -webkit-box;
表示將元素作為彈性伸縮盒子模型顯示,-webkit-box-orient: vertical;
表示將彈性伸縮盒子模型設置為從上到下排列,-webkit-line-clamp: 2;
表示最多顯示兩行,overflow: hidden;
和text-overflow: ellipsis;
的含義與單行省略號相同。