CSS中可以使用text-overflow屬性實現多行文字截斷。該屬性主要用于在一個固定寬度的容器中,當文字超出容器寬度時,用省略號代替溢出的部分。
.box { width: 200px; height: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
如上所示,box為容器的類名,設置了固定的寬度和高度,并且使用了overflow:hidden;和white-space:nowrap;來讓文字溢出時隱藏并防止換行。text-overflow:ellipsis;則是用省略號來代替省略內容。
然而,以上代碼只能在單行文字中使用。如果要在多行文字中使用,可以借助一些新的CSS屬性,比如display:-webkit-box;和-webkit-line-clamp;。
.box { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis; }
類似上述的代碼,我們只需要將display屬性設置為-webkit-box,并添加-webkit-box-orient:vertical;來使文本垂直排列。然后,我們可以通過-webkit-line-clamp屬性設置行數,并將overflow設置為hidden來達到截斷多行文字的效果。
需要注意的是,-webkit-line-clamp屬性只有在-webkit-box-orient屬性設置為-vertical時才會生效。同時,需要添加瀏覽器前綴-webkit-以適應不同的瀏覽器。
總之,CSS中有很多處理文字截斷的方法,而text-overflow和-webkit-line-clamp則是處理多行文字截斷的常用方法。掌握這些方法可以讓我們更好地掌控網頁的顯示效果并提高頁面的用戶體驗。