My personal website features a collection of user-generated stories, with only the first 4 rows of each story visible in a fading text gradient from black to white. There is a "show more/less" button to reveal or hide the full content. While this layout works perfectly on my laptop, I noticed that on my OnePlus 7T phone, a small portion of the 5th row is visible as black dots at the top, which I want to prevent from happening.
$(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;*/
}