SPAN внутри DIV предотвращает переполнение текста: многоточие

Этот вопрос ни в коем случае не ужасен, но это проблема, с которой я столкнулся, и мне было интересно, как некоторые из экспертов SO решат ее - если есть решение.

У меня есть виджет пользовательского интерфейса с фиксированной шириной, который отображает информацию о файле. Я предоставляю возможность редактировать имя файла, щелкнув по нему, и указать, что у меня есть стиль :hover, применяемый для изменения цвета шрифта.Первоначально я помещал имя файла в DIV, но поскольку разные имена файлов имеют разную длину, я не могу изменить размер DIVна имя файла и сохранить эффект :hoverплотно к тексту. С короткими именами файлов эффект :hoverпо-прежнему отображается, когда курсор находится над пустой частью DIV. Это было не то, чего я хотел, поэтому в качестве решения я поместил имя файла в SPAN(вместе с эффектом :hover). Это решило проблему с короткими именами файлов, но предотвратило изящное переполнение длинных имен файлов эллипсом.

В идеале я хотел бы решение, которое обеспечивает оба эффекта: длинные имена файлов в виде эллипса и применение эффекта :hoverтолько при наведении курсора на фактический текст. Я все еще новичок в css, поэтому, возможно, мне просто не хватает очевидного ответа. Спасибо!

Вот пример страницы, показывающей проблемы:
(и на jsfiddle)

Редактировать: я подумал, что могу выполнить некоторую магию javascript, чтобы обрезать более длинные имена, но надеялся на более простое решение css.

    
    

        ThisIsMyReallyReallyLongFilename.txt
    

    
    

        Shortname.txt
    

    
    

        ThisIsMyReallyReallyLongFilename.txt
    

    
    

        Shortname.txt