title: Making div background opaque so that overflow text can be read?
body: <p>The following code shows how you can have text truncated by a div with overflow:hidden and then show all text on mouse over.  The problem is if there is other text beside or below the div, it is super imposed on the text below.  Thus it is difficult to read.  <strong>I would like the background of the div to be opaque so that the text is easier to read.</strong>  Resizing the div is not an option cause that will cause the layout to "jump".</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style type="text/css"&gt; 
  div.test
  {
  width:12em; 
  overflow:hidden; 
  border:1px solid #000000;
  height:20px;
  background-color:white
  }
  
  div.test:hover
  {
  text-overflow:inherit;
  overflow:visible;
  background-color:white
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;p&gt;Hover over the two divs below, to see the entire text.&lt;/p&gt;
  
  &lt;div class="test" style="text-overflow:ellipsis;"&gt;This is some long text that will not fit in the box&lt;/div&gt;
  &lt;div class="test" style="text-overflow:clip;"&gt;This is some long text that will not fit in the box&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>