使用CSS可以限制顯示的文本字數。我們可以使用text-overflow屬性,該屬性用于在元素的文本溢出容器時顯示一個省略號。
/* * 讓文本只顯示兩行并且超出部分隱藏 */ .text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } /* * 讓文本只顯示6個字符并且超出部分隱藏 */ .text { width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
以上兩個例子分別限制了顯示的行數和字符數,并可以使用省略號作為遮罩,實現更好的顯示效果。
CSS的text-overflow屬性提供了很大的靈活性,可以根據具體需求設置不同的顯示效果,讓頁面呈現更好的視覺效果。