title: Showing truncated text on hover using CSS ellipsis overlaps text below it
body: <p>I have a <code>name</code> tag in the sidebar which should display single line and truncate if long text follow by triple dots (lorem ipsum...) and should show full text on hover. </p>
  
  <p>I am able to achieve this using css but my problem is when full text is displayed it overlaps the text below it. (Images attached)</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;p class="name"&gt;
      Lorem ipsum lorem ipsum lorem ipsum
  &lt;/p&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.name{
      color: #0079c1;
      height: 2em; 
      line-height: 1em; 
      font-size: 20px;
      font-weight: 400;
      text-overflow: ellipsis;
      margin-bottom: 12px;
      cursor: pointer;
      word-break: break-all;
      overflow:hidden;
      white-space: nowrap;
  }
  
  .name:hover{
      overflow: visible; 
      white-space: normal; 
  }
  </code></pre>
  
  <p>Here is a <a href="https://jsfiddle.net/y25okb8L/" rel="noreferrer"><strong>JSFiddle</strong></a> </p>
  
  <p>Text overlapping on hover. Expected behaviour is it should push the content below it.
  <a href="https://i.stack.imgur.com/GWeIX.png" rel="noreferrer"><img src="https://i.stack.imgur.com/GWeIX.png" alt="enter image description here"></a></p>