Question

这个问题绝不可怕，但这是我遇到的一个问题，并且想知道一些SO专家如何解决它 - 如果有解决方案的话。

我有一个固定宽度的UI小部件，可以显示文件信息。我提供了通过单击来编辑文件名的功能，并指示我应用了:hover样式的功能来更改字体颜色。最初我将文件名放在DIV内，但由于不同的文件名长度不同，我无法将DIV的大小调整为文件名，并使:hover效果与文本保持一致。对于短文件名，当光标位于:hover的空白部分时，DIV效果仍会显示。这不是我想要的解决方案，因此我将文件名放在SPAN（以及:hover效果）中。这解决了短文件名的问题，但阻止了长文件名与椭圆优雅地溢出。

理想情况下，我想要一个可以实现这两种效果的解决方案 - 椭圆长文件名，并且仅当将鼠标悬停在实际文本上时才应用:hover效果。我对css还很新，所以也许我只是错过了一个明显的答案。谢谢！

以下是显示问题的示例页面：
（及jsfiddle）

编辑：我想我可以执行一些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>

Answer 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>

Answer 2

问题实际上来自SPAN display:inline-block。您需要删除它或将其更新为something along the lines of this jsFiddle。根据你的例子，我不清楚到底应该改变什么。

我相信这是因为SPAN永远不会溢出它的父DIV。 At least that's how the W3 spec states this gets triggered.

Answer 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>

DIV中的SPAN可防止文本溢出：省略号

3 个答案: