title: How to I truncate text with ellipsis in a multi-line div using CSS?
body: <p>How do I truncate text with ellipsis in a multi-line div field? It works when the div is a single line. How do I make it work for multiple lines so it puts ellipsis at the very end in the lower right corner of the div?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt; 
  #div1 {
      white-space: nowrap; 
      width: 12em; 
      overflow: hidden;
      text-overflow: ellipsis; 
      border: 1px solid #000000;
  }
  
  #div2 {
      /*white-space: nowrap; */
      width: 12em; 
      overflow: hidden;
      text-overflow: ellipsis; 
      border: 1px solid #000000;
      height: 3em;
  }
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;The following two divs contains a long text that will not fit in the box. As you can see, the text is clipped.&lt;/p&gt;
  
  &lt;p&gt;This div uses "white-space: nowrap;":&lt;/p&gt;
  &lt;div id="div1"&gt;This is some long text that will not fit in the box&lt;/div&gt;
  
  &lt;p&gt;This div uses "height: 3em;":&lt;/p&gt;
  &lt;div id="div2"&gt;This is some long text that will not fit in the box This is some long text that will not fit in the box This is some long text that will not fit in the box&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>