顯示最大兩條線，並顯示後兩行只衰落

Question

下面是現有實現的link。

目前，我總是顯示衰落。如果用戶輸入了兩行以上，則需求將會消失。但是，如果有一行文本或兩行文本具有足夠的空間，則不會出現這種淡化。是否可以使用純CSS實現？

注：我不能設置固定高度的div有隻佔據一行的高度，如果用戶已經進入了只有一行。

.testWrapOverflowFade { 
    overflow: hidden; 
    position: relative; 
    height: 2.4em; /* NOL = height in this class/height in after class. Here it is 2.4/1.2 = 2. Change it to 3.6em for display 3 lines. */ 
} 
.testWrapOverflowFade:after {  
    content: ""; 
    text-align: right; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: 10%; 
    height: 1.2em; 
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); 
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); 
    background: -o-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); 
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%); 
} 

<div class="testWrapOverflowFade">This is a long text this is a long text 2 this is a long text 3 this is a long text 4 this is a long text 5 this is a long text6 this is a long text7 this is a long text 8 this is a long text 9 this is a long text 10 this is a long text 11 this is a long text12 </div> 

---- ---- UPDATE 這裏是懸停問題。我用黃色突出顯示它。

在此先感謝。

Answer 1

讓我們看看什麼是可能的純CSS：

1. 設置max-height: 2.4em的容器 - 你可以用它來調整你需要的行數。

2. 設置top: 1.2em爲after把推子在第二行 - 你可以用它來把推子在最後一行的末尾。

要求正在消退應該來，如果用戶輸入超過 兩行。但是，如果有一行文本 或兩行文本具有足夠的空間，則不應該出現這種淡化。文字的

一號線：由於after是容器背後會隱藏背後。

2行以上：max-height爲我們解決了這個問題。

兩行文本有足夠的空間：爲此，你需要JS隱藏推子（不是一個問題，如果推子背景顏色相匹配）

觀看演示如下 - 背景設置爲紅色插圖：

.testWrapOverflowFade { 
 
    overflow: hidden; 
 
    position: relative; 
 
    max-height: 2.4em; 
 
} 
 
.testWrapOverflowFade:after { 
 
    content: ""; 
 
    text-align: right; 
 
    position: absolute; 
 
    bottom: 0; 
 
    right: 0; 
 
    top: 1.2em; 
 
    width: 10%; 
 
    height: 1.2em; 
 
    background: red; 
 
}

<div class="testWrapOverflowFade">This is a long text this is a long text This is a long text this is a long text This is a long text this is a long text 
 
</div>