To fade out text on overflow with CSS if the text is bigger than allowed, we add a linear gradient mask.
For instance, we write
<div>
<div class="fade">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus mauris
nunc, vehicula at nisl eu, aliquam ultrices augue. Nullam eget auctor metus.
</div>
</div>
to add nested divs.
Then we write
.fade {
-webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
}
to select the div and add a mask to apply a linear gradient to apply the fade effect.