在網頁中,我們常常需要控制文本的行數,以保持頁面的美觀性和整潔性。在CSS中,我們可以使用以下方法來實現控制文本的行數。
/*控制文本行數,最多只顯示2行*/ .ellipsis { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
以上CSS代碼中,我們通過設置元素的overflow屬性為hidden,使得超出元素邊框的文本內容不可見。然后,我們使用text-overflow屬性將溢出的文本顯示為省略號(...)。接著,我們將元素的display屬性設置為-webkit-box,以使用Webkit的flexbox模型來布局元素。使用-webkit-line-clamp屬性來設定元素的行數,該屬性值設為2,表示只顯示2行內容。最后,我們通過設置-webkit-box-orient屬性,使得文本內容沿著垂直方向進行排列。
上一篇css提交按鈕灰顯
下一篇css規則中的標準貨物