Fade out overflow text

The trick is to place a ::before element with a gradient above the bottom text.

To be able to select the text below the overlay you can use pointer-events: none;.

HTML

<div class="text">
Muffin jelly tiramisu. Jelly beans chocolate cake jelly beans jelly pastry carrot cake sugar plum chocolate bar. Sugar plum macaroon topping candy canes cupcake. Cupcake powder candy canes lollipop danish cake donut sesame snaps gingerbread.
</div>

CSS

.text {
  width: 200px;
  height: 6rem;
  overflow: hidden;
  position: relative;
}

.text:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3rem;
  width: 100%;
  background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

Sources

You saw it first on CSSPoo.