CSS中多行文字省略是一種很實用的技巧。當一段文字超出容器寬度,而我們又不想改變容器的大小時,就可以使用多行文字省略,將多余的部分省略掉。
在CSS中,我們可以使用text-overflow來實現文字省略。不過,text-overflow只能用在單行文本上,對于多行文本并不能起到作用。此時,我們需要使用CSS3提供的新特性:-webkit-line-clamp。
實現多行省略的核心代碼如下:
.box { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
上面的代碼將容器設置為一個水平方向的彈性盒子,并設置為垂直方向。-webkit-line-clamp屬性用來控制顯示的行數,這里設置為2。而overflow屬性用來隱藏超出部分。
這種技巧在移動端和響應式布局中特別實用。當我們需要在小屏幕設備上顯示一些重要文字時,多行省略可以幫助我們節省空間,提高用戶體驗。
當然,未來CSS可能還會有更多的文字省略屬性,我們可以持續關注。