CSS是一種前端開發技術,可以通過控制標簽的樣式來改變HTML頁面的布局和外觀。有時候我們需要在頁面中控制文字的顯示個數以滿足需求,這時我們可以使用CSS來實現。
/* 控制文字顯示個數 */ /* 單行超出隱藏 */ .text-overflow{ overflow: hidden; /* 超出部分隱藏 */ text-overflow: ellipsis; /* 以省略號替代 */ white-space: nowrap; /* 不換行 */ } /* 多行超出隱藏 */ .text-overflow{ display: -webkit-box; /* 將元素變成彈性伸縮盒子 */ -webkit-box-orient: vertical; /* 設置從上到下排列 */ -webkit-line-clamp: 2; /* 顯示2行,超出部分自動隱藏 */ overflow: hidden; /* 超出部分隱藏 */ text-overflow: ellipsis; /* 以省略號替代 */ }
以上代碼中,我們使用了overflow屬性來控制超出部分的顯示問題。同時,text-overflow屬性可以控制超出部分的省略,使得頁面更加美觀。
需要注意的是,使用多行超出隱藏需要設置元素的display為-webkit-box,并在該屬性下設置行數和超出部分的處理方式。雖然display屬性的取值非常多,但是設置成-webkit-box可以向下兼容,保證在不同的瀏覽器中都能夠正常顯示。
上一篇java問題定位和排查
下一篇css表格邊距重疊