在網頁設計中,有時候需要限定文字只能顯示兩行,可以用CSS來實現。
.line-limit { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
以上代碼中,先給該元素添加一個類名“line-limit”,然后通過CSS中的display屬性將元素的顯示方式設置為“-webkit-box”,使文字按照塊狀元素進行展示;接著使用"-webkit-line-clamp: 2"屬性限制文字只顯示兩行;再使用"-webkit-box-orient: vertical"屬性設置文字豎直排列;最后使用overflow屬性進行文字溢出隱藏。
當然,如果你需要限定的行數不是兩行,只需要將"-webkit-line-clamp"屬性的值修改為相應的數字即可。
總的來說,使用CSS的方式限定文字行數非常方便,不僅代碼量少,而且效果更直觀。希望以上介紹對你有所幫助。
上一篇mysql 誤刪回滾
下一篇css隱藏占據空間