title: Intelligently clipping text that exceeds a box boundary
body: <p>I need to display some text in a box with an explicit width/height. If the text content exceeds the height of the box, I'd like to be truncated, preferably with an ellipsis.</p>
  
  <p>I tried using <code>overflow: hidden</code>, like so:</p>
  
  <pre><code>&lt;div style="width: 500px; height: 50px; 
       overflow: hidden; 
       border: 1px solid black;"&gt;
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ut sem orci. Sed laoreet, diam sed porttitor rhoncus, erat ante volutpat metus, dignissim laoreet lacus dolor a nisi. Fusce elit libero, interdum vel cursus tincidunt, vulputate quis lorem. In accumsan pharetra mauris, id vulputate sapien condimentum in. Etiam quis laoreet lectus
  &lt;/div&gt;
  </code></pre>
  
  <p>But that often results in a line of text being partially visible, like this:</p>
  
  <p><img src="https://i.stack.imgur.com/IrbOE.png" alt="sliced text image"></p>
  
  <p>I thought about counting characters and manually truncating the text, but that won't help when the font is proportional. </p>