How to fade out text on overflow with CSS if the text is bigger than allowed?

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.