在網頁設計中,經常會遇到需要控制文字的字數的情況。這時候我們就需要使用CSS來實現。
/* 設置文字顯示行數和行高 */ .line-clamp { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp2 { display: block; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; /* Safari 6+, Chrome 18+ */ line-clamp: 2; /* Firefox 13+, IE 10+, Opera 15+ */ }
以上代碼中,我們使用了兩個CSS屬性來控制文字的顯示。
第一個是通過設置文字顯示的行數和行高來控制文字顯示的字數。
display: -webkit-box;
表示使用flex
布局模型來進行文字的顯示布局。
-webkit-box-orient: vertical;
表示文字的顯示方向為垂直方向。
overflow: hidden;
表示超出文字顯示范圍的內容隱藏不顯示。
第二個是通過設置字數限制以及文字溢出時使用ellipsis
來表示省略號來控制文字顯示的字數。
-webkit-line-clamp: 2;
表示文字最多顯示2行。
text-overflow: ellipsis;
表示文字溢出時使用ellipsis
來表示省略號。
通過以上兩個屬性的使用,我們可以輕松地控制文字的顯示字數,適應各種網頁設計場景。