title: SPAN inside DIV prevents text-overflow:ellipsis
body: <p>This question is by no means dire, but it's a problem I've encountered and was wondering how some of the SO experts would solve it - if there is a solution.  </p>
  
  <p>I have a fixed-width UI widget that displays file information. I'm providing the ability to edit the filename by clicking on it and to indicate that functionality I have a <code>:hover</code> style applied to change the font color. Originally I put the filename within a <code>DIV</code>, but since different filenames are different lengths I can't size the <code>DIV</code> to the filename and keep the <code>:hover</code> effect tight to the text. With short filenames the <code>:hover</code> effect still displays when the cursor is over the empty part of the <code>DIV</code>. This wasn't what I wanted so as a solution I put the filename within a <code>SPAN</code> (along with the <code>:hover</code> effect). That solved the problem for short filenames but prevented the long filenames from overflowing gracefully with an ellipse.  </p>
  
  <p>Ideally I'd like a solution that achieves both effects - ellipse long filenames and apply the <code>:hover</code> effect only when hovering over the actual text. I'm still pretty new to css so maybe I'm just missing an obvious answer. Thanks!</p>
  
  <p>Here is an example page showing the issues:<br>
  (and on <a href="http://jsfiddle.net/webshooter/Jhcup/">jsfiddle</a>)</p>
  
  <p>Edit: I figured I could perform some javascript magic to clip the longer names, but was hoping for a simpler css solution.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
      div {
          margin:10px;
          width:200px;
          max-width:200px;
          font-size:1.2em;
          overflow:hidden;
          text-overflow:ellipsis;
      }
      div.a:hover, span:hover {
          color:666;
          cursor:pointer;
      }
      span {
          display:inline-block;   
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;!-- This works well for long filenames --&gt;
      &lt;div class="a"&gt;
          ThisIsMyReallyReallyLongFilename.txt
      &lt;/div&gt;
  
      &lt;!-- ... but fails for the short names --&gt;
      &lt;div class="a"&gt;
          Shortname.txt
      &lt;/div&gt;
  
      &lt;!-- This fails to show ellipse for long filenames --&gt;
      &lt;div&gt;
          &lt;span&gt;ThisIsMyReallyReallyLongFilename.txt&lt;/span&gt;
      &lt;/div&gt;
  
      &lt;!-- ... but wraps the text nicely for short names --&gt;
      &lt;div&gt;
          &lt;span&gt;Shortname.txt&lt;/span&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>