title: Truncate the text in div
body: <p>I have few box items and use flex to align them.</p>
  
  <p>Each box has flex-direction: vertical attribute.</p>
  
  <p>However, as you can see the blue description. I want to make them have the same height and the overflow part should display ellipsis.</p>
  
  <p>However,  no luck at all. The text is inside <code>div.control &gt; div</code></p>
  
  <p>Any idea?</p>
  
  <pre><code>   height: 50px !important;
  
      text-overflow: ellipsis;
      div.control{
        overflow: hidden;
        text-overflow: ellipsis;
        div{
          height: 50px;
          background: lightblue;
          overflow: hidden;
          text-overflow: ellipsis;
  
        }
      }
  </code></pre>
  
  <p><img src="https://i.imgur.com/eXD1qg5.png=300x" alt="inline" title="Title"></p>