title: Place icon after two lines line with text-overflow ellipsis without breaking into 3rd line
body: <p>I have a requirement where I need to display two lines of text followed by an icon (rendered via img tag). If the text length exceeds two lines, need to show ellipsis. But the icon should be inline with the text, and should not be clipped when text length increases.</p>
  <p>It should be something like</p>
  <pre><code>A lengthy text that
  spans two lin.. 
  </code></pre>
  <p>Assume the emoji to be an img tag</p>
  <p><a href="https://stackoverflow.com/questions/35043062/place-icon-after-a-line-with-text-overflow-ellipsis">Place icon after a line with text-overflow ellipsis</a></p>
  <p>For a single line text, this can be done with inline-block as  suggested by answers in the above stack overflow. But for a multiline text, if i add this, it doesnt work.</p>
  <pre><code>  display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
  </code></pre>
  <p><a href="https://codepen.io/praneethack/pen/LYxxPGN" rel="nofollow noreferrer">https://codepen.io/praneethack/pen/LYxxPGN</a></p>
  <p>Edit: Have modified codepen code to have img tag instead of font icon</p>