我在表格中使用了以下樣式。如果文本有多行，則僅顯示第一行，如果用戶將鼠標懸停在文本上，則顯示其余行。問題是，如果有的話，我想至少顯示兩行。想象一下，我有一個包含 4 行的文本，前 2 行應該從一開始就顯示，另外 2 行應該在用戶將鼠標懸停在文本上時顯示。我當前的代碼是這樣的：.cortar { width: 135px !important; height: 20px; padding: 20px; border: 1px solid blue; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; -webkit-transition: all 1s; -moz-transition: all 1s; transition: all 1s; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}.cortar:hover { width: 100%; white-space: initial; overflow: visible; cursor: pointer;}我怎樣才能實現這個目標？
1 回答
開滿天機
TA貢獻1786條經驗 獲得超13個贊
嘗試-webkit-line-clamp如下：
.cortar {
width: 135px !important;
height: 20px;
padding: 20px;
border: 1px solid blue;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
/* from here */
box-sizing: border-box;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
如果它是編譯的一些 scss 文件，您可能需要添加autoprefixer. 我在使用時遇到了這個問題angular。
.cortar {
width: 135px !important;
height: 20px;
padding: 20px;
border: 1px solid blue;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
-webkit-transition: all 1s;
-moz-transition: all 1s;
transition: all 1s;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
-webkit-line-clamp: 2;
/* autoprefixer: off */
webkit-box-orient: vertical;
/* autoprefixer: on */
}
- 1 回答
- 0 關注
- 103 瀏覽
添加回答
舉報
0/150
提交
取消