我在表格中使用了以下樣式。如果文本有多行，則僅顯示第一行，如果用戶將鼠標(biāo)懸停在文本上，則顯示其余行。問(wèn)題是，如果有的話，我想至少顯示兩行。想象一下，我有一個(gè)包含 4 行的文本，前 2 行應(yīng)該從一開(kāi)始就顯示，另外 2 行應(yīng)該在用戶將鼠標(biāo)懸停在文本上時(shí)顯示。我當(dāng)前的代碼是這樣的：.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;}我怎樣才能實(shí)現(xiàn)這個(gè)目標(biāo)？
1 回答
開(kāi)滿天機(jī)
TA貢獻(xiàn)1786條經(jīng)驗(yàn) 獲得超13個(gè)贊
嘗試-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. 我在使用時(shí)遇到了這個(gè)問(wèn)題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 關(guān)注
- 114 瀏覽
添加回答
舉報(bào)
0/150
提交
取消