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

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

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

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

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

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

<html>
<head>
<style>
    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;   
    }
</style>
</head>
<body>

    <!-- This works well for long filenames -->
    <div class="a">
        ThisIsMyReallyReallyLongFilename.txt
    </div>

    <!-- ... but fails for the short names -->
    <div class="a">
        Shortname.txt
    </div>

    <!-- This fails to show ellipse for long filenames -->
    <div>
        <span>ThisIsMyReallyReallyLongFilename.txt</span>
    </div>

    <!-- ... but wraps the text nicely for short names -->
    <div>
        <span>Shortname.txt</span>
    </div>

</body>
</html>

Ответ 1

Как это? (Обратите внимание на удаление display:inline-block; из диапазона.)

<html>
<head>
<style>
div {
    margin:10px;
    width:200px;
    max-width:200px;
    overflow: hidden;
    text-overflow:ellipsis;
    font-size: 1.2em;
}
span:hover {
    color:666;
    cursor:pointer;
}
</style>
</head>
<body>

<!-- This now does show ellipse for long filenames -->
<div>
    <span>ThisIsMyReallyReallyLongFilename.txt</span>
</div>

<!-- ... but wraps the text nicely for short names -->
<div>
    <span>Shortname.txt</span>
</div>

</body>
</html>

Ответ 2

Проблема на самом деле происходит от SPAN с display:inline-block. Вам нужно будет либо удалить это, либо обновить его до что-то вроде строки jsFiddle. Я не совсем понимаю, что именно следует изменить на основе вашего примера.

Я считаю, что это происходит потому, что SPAN никогда не переполнит родительский DIV. По крайней мере, как спецификация W3 заявляет, что это срабатывает.

Ответ 3

Переместите свойства overflow и text-overflow из правила div в новое правило, которое предназначено как для div, так и для span. Добавьте максимальную ширину.

<html>
<head>
<style>
    div, span {
        overflow:hidden;
        text-overflow:ellipsis;
        max-width:200px;
    }
    div {
        margin:10px;
        width:200px;
        font-size:1.2em;
    }
    div.a:hover, span:hover {
        color:#666;
        cursor:pointer;
    }
    span {
        display:inline-block;   
    }
</style>
</head>
<body>

    <!-- This works well for long filenames -->
    <div class="a">
        ThisIsMyReallyReallyLongFilename.txt
    </div>

    <!-- ... but fails for the short names -->
    <div class="a">
        Shortname.txt
    </div>

    <!-- This fails to show ellipse for long filenames -->
    <div>
        <span>ThisIsMyReallyReallyLongFilename.txt</span>
    </div>

    <!-- ... but wraps the text nicely for short names -->
    <div>
        <span>Shortname.txt</span>
    </div>

</body>
</html>