在移动设备上，当前4行隐藏时，停止显示第5行的顶部

Question

我有一个网站，它显示了许多用户输入的故事。每个故事只显示前4行，文本渐变从黑色变为白色。有一个显示更多/更少按钮。这在笔记本电脑上运行良好，但当我在手机(OnePlus 7T(上查看时，我可以看到第5排的最顶部，它看起来像许多黑点。我不想阻止这种事的发生。

$(document).ready(function() {
$(".content").on("click", '.showMore', function() {
var $this = $(this);
var content = $this.prev()
var linkText = $this.text().toUpperCase();

if (linkText === "MORE") {
linkText = "Less";
$this.siblings('div').css('height', 'auto');
var currHeight = $this.siblings('div').height();
$this.siblings('div').css('height', '8em');
$this.siblings('div').animate({height: currHeight}, 500);
$this.parent('div').addClass('fullpost');
} else {
$this.siblings('div').animate({height: '8em'}, 500);
$this.parent('div').removeClass('fullpost');
linkText = "More";
}    
$this.html( "<a>" + linkText + "</a>" );  
});
});

<div class="content">
<div class="post">
<div class="hideContent">
<div class="post-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit a ipsum nec pharetra. Donec eget tempus neque. Vestibulum sit amet sollicitudin ligula. Sed viverra odio nec augue fermentum condimentum. Etiam dapibus urna sit amet sagittis lobortis. Maecenas ut nisi et leo facilisis pellentesque. Pellentesque sed lacus nulla. Morbi auctor quam et neque fermentum, quis congue erat viverra. Aliquam aliquam vulputate lorem, euismod scelerisque augue finibus eu. Suspendisse efficitur bibendum nibh, blandit finibus sapien eleifend a. Vestibulum bibendum augue augue, nec dictum nisi posuere a.
</div>
</div>
<div class="showMore"><a>Show more</a></div>
</div>
</div>

.post-text::after {
content: "";
position: absolute;
top: 2em;
left: 0;
height: 90px;
width: 100%;
background: linear-gradient(rgba(255, 255, 255, 0.2), white);
}
.fullpost .post-text::after {
height:0;
background: none;
}
.post-text{
position: relative;;
letter-spacing: normal;
line-height: 2;
font-size: 16px;
font-family: Times, serif;
color: #000000;
text-align: justify;
}
.hideContent {
overflow: hidden;
line-height: 1em;
height: 8em;
}
.showContent {
line-height: 1em;
height: auto;
}
.showMore {
margin-top: -8px;
cursor: pointer;
text-align: center;
color: #1ca099;
font-weight: bold;
/*text-decoration: underline;*/
}

Answer 1

将max-height和margin-bottom添加到hideContent类以限制div容器的大小；更多"；链接一个触球。

.hideContent {
overflow: hidden;
line-height: 1em;
height: 8em;
max-height: 128px;
margin-bottom: 10px;
}