显示最多两行并仅在两行后显示淡入淡出

Question

以下是现有实施的link。

目前我总是在显示褪色。如果用户输入了两行以上，则需要淡出。但是当有一行文本或两行文本有足够的空间时，不应该出现这种衰落。是否可以使用纯CSS实现？

注意：我无法设置修复高度，因为如果用户只输入一行，Div必须只占用一行高。

if (bFinishedSuccessfully)
{
    try
    {
        Log.i("GradeActivity", "SOMEHOW THIS IS AGAIN STARTING THE ScanningActivity!!!");

        Intent intent = new Intent(this, ScanningActivity.class);
        intent.putExtra("SessionInfo", m_hmActivate);
        startActivity(intent);
    }
    catch (Exception ex)
    {
        Log.i("GradeActivity", "ex: " + ex.getMessage());
    }
}

----更新---- 这是悬停问题。我用黄色突出显示它。

提前致谢。

Answer 1

让我们看看纯CSS可能是什么：

1. 为容器设置max-height: 2.4em - 您可以使用它来调整所需的行数。

2. 为top: 1.2em设置after以将推子放在第二行 - 您可以使用它来放置推子在最后一行的末尾。

  

如果用户输入的数量超过了，则要求就会消失   两行。但是当有一行文字时，不应该出现这种淡化   或两行文字，空间足够。

一行文字：由于after位于容器后面，它将隐藏在后面。

超过2行：max-height为我们解决了这个问题。

两行文本，空间足够：为此，您需要JS隐藏推子（如果推子与背景匹配则不是问题）

请参阅下面的演示 - 背景设置为红色以供说明：

＆＃13;
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;