Hover over shortened text to expand without affecting surrounding elements
<p>I have an element that I have set <code>text-overflow: ellipsis</code>. I then set a hover to expand the text. Is there a way in CSS to eliminate the expanded text from affecting elements above it or below it?</p>

<p>Setting the text:</p>

<pre><code>.box h3 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box h3:hover {
  text-overflow: initial;
  white-space: normal;
  background-color:blue;
  display: block;
}
</code></pre>

<p><a href="http://codepen.io/anon/pen/dMoxyr" rel="nofollow"><strong>CodePen</strong></a></p>