title: Material-ui: write text in exactly 2 lines with ellipsis
body: <p>For a reactjs app, I use Material-ui (<a href="https://material-ui.com/" rel="noreferrer">https://material-ui.com/</a>) for the design. And I need to write text in card that match exactly 2 lines.</p>
  <p>What I've already done works when text can be contained in 2 or 1 lines, but for longer text, the cut becomes before word and it is not ellipsis.</p>
  <p><a href="https://i.stack.imgur.com/9WRKP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/9WRKP.png" alt="enter image description here" /></a></p>
  <p>Here what I've done</p>
  <pre><code>   &lt;Box
          fontSize=&quot;h5.fontSize&quot;
          component=&quot;div&quot;
          overflow=&quot;hidden&quot;
          textOverflow=&quot;ellipsis&quot;
          height={70}
        &gt;
          {title}
        &lt;/Box&gt;
  </code></pre>
  <p>The result is good on the first card, for on the second one, the last word 'Floooooo' is displayed in the hidden part (the third line) but not in the second line with ellipsis. I've tried to add whiteSpace=&quot;nowrap&quot; but the text is only 1 line height (fig 2) <a href="https://i.stack.imgur.com/fDL4K.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fDL4K.png" alt="enter image description here" /></a></p>
  <p>Can you help me please?</p>