CSS的兩行溢出是指當元素的內容超出了該元素的寬度和高度,導致需要多行來顯示全部內容時,我們可以通過設置CSS樣式來實現只顯示兩行,并且超出部分以省略號(...)形式顯示。
.ellipsis-2-lines { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
上面的代碼段中設置了一個名為ellipsis-2-lines
的類,使用overflow: hidden;
來隱藏超出部分,使用-webkit-box;
來設置盒子為塊級容器,-webkit-box-orient: vertical;
來設置盒子容器為垂直方向,-webkit-line-clamp: 2;
來設置顯示的最大行數為2。
需要注意的是,這個方法只在webkit內核的瀏覽器(如Safari和Chrome)中適用,在其他瀏覽器中需要添加對應的CSS樣式。
如果要實現更多行溢出效果,可以根據需要修改-webkit-line-clamp
的值為需要顯示的行數。