title: Show more / less button with transition
body: <p>First, sorry for my potato english. Also it's my first question here.</p>
  
  <p>So. I work with <strong>Vuejs</strong> but I dont think it's important in this case. I have html string that looks for example like this - </p>
  
  <pre><code>&lt;h1&gt;&lt;strong&gt;Lorem Ipsum&lt;/strong&gt;&lt;/h1&gt;&lt;p&gt;Some long text and the image - &lt;img src="some-img-src"&gt;&lt;/p&gt;
  </code></pre>
  
  <p>it's generated based on what author of the post will write.
  If post is too long, on page load it should display only few lines and there should be button Show more / less.</p>
  
  <p>I did my solution where I used height with transition, where initial height is about 500px and then it is computed with clientHeight. But problem are images, sometimes they are here, sometimes not, height of images is always different too, so they will be cut in half sometimes or make text to be cut in half on the last line, when it's folded. I tried to use line-clamping too and it somehow worked but then I have no idea how to make it with <strong>transition</strong>, which is important here.</p>
  
  <p>Is it even possible?</p>
  
  <p>edit: Here - <a href="https://jsfiddle.net/sm2xLj5v/9/" rel="nofollow noreferrer">jsfiddle.net/sm2xLj5v/9</a> (Not sure why mounted is not working so i removed v-if on <code>&lt;a&gt;</code> tag, but overall its the same.</p>