title: Fadeout last line of text if more than n lines
body: <p>We need to show product titles on a maximum of 3 lines, and fade out the 3rd line <strong>only</strong> if the title breaks onto more than 3 lines.</p>
  <p>What I tried so far to solve this is having a wrapper with a max-height of 3 lines, the title in it and a pseudo-element that overlays a fade-out (resp. fade-to-white) gradient.</p>
  <pre><code>.title:after {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 100%);
    content: '';
    width: 100%;
    height: 1.3rem;
    position: absolute;
    top: 2rem;
    left: 0;
  }
  </code></pre>
  <p>Problem is, this happens irrespective of whether there's a 4th(+) line.</p>
  <p>I created a JSFiddle: <a href="https://jsfiddle.net/nq4ratr7/5/" rel="nofollow noreferrer">https://jsfiddle.net/nq4ratr7/5/</a></p>
  <p>Goal of the fiddle-example would be to show all titles up to 3 lines without a fadeout, and fadeout on the 3rd line for the example that breaks onto 4 (&quot;4 lines...&quot;).</p>
  <p>For performance-reasons, no JS should be used. I'm well aware that it's easy with JS.</p>