html span overflow,css - SPAN inside DIV prevents text-overflow:ellipsis - Stack Overflow

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.

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 :hover style applied to change the font color. Originally I put the filename within a DIV, but since different filenames are different lengths I can't size the DIV to the filename and keep the :hover effect tight to the text. With short filenames the :hover effect still displays when the cursor is over the empty part of the DIV. This wasn't what I wanted so as a solution I put the filename within a SPAN (along with the :hover effect). That solved the problem for short filenames but prevented the long filenames from overflowing gracefully with an ellipse.

Ideally I'd like a solution that achieves both effects - ellipse long filenames and apply the :hover 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!

Here is an example page showing the issues:

(and on jsfiddle)

Edit: I figured I could perform some javascript magic to clip the longer names, but was hoping for a simpler css solution.

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;

}

ThisIsMyReallyReallyLongFilename.txt

Shortname.txt

ThisIsMyReallyReallyLongFilename.txt

Shortname.txt