渐变文本直到第一行CSS

Question

我正在尝试追随

线性渐变直到第一行并移动＆＃34;这是另一个文本＆＃34;因此。现在，如果我有较少的文字（一行），它可以工作，但当屏幕尺寸改变或添加更多文本时，它将无法工作。

如下所示

任何使其响应的建议只显示一行，并且隐藏休息，以便＆＃34;这是另一个文本＆＃34;可以向上移动。

这是jsfiddle：https://jsfiddle.net/1ktxnt4t/

HTML

<div class="text">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed mi urna. Phasellus porta volutpat ipsum, at dapibus ligula. 
<div class="overlay"></div>
</div>
<div class="text2">
     this is another text
</div>

CSS

.text {position: relative; color:red; text-align:center;}
.text2 {position: relative; color:red; text-align:center; top:10px;}

.overlay {
    position: absolute;
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(243,243,243,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(243,243,243,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(243,243,243,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(243,243,243,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(243,243,243,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(243,243,243,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f3f3f3', GradientType=0 );

    top: 0;
    width: 100%;
    height: 100%;
    z-index:1;
}

由于