15

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

我有一个显示文件信息的固定宽度 UI 小部件。我提供了通过单击文件名来编辑文件名的能力，并表明我:hover应用了一种样式来更改字体颜色的功能。最初我将文件名放在 aDIV中，但由于不同的文件名的长度不同，我无法DIV调整文件名的大小并将:hover效果与文本保持一致。对于短文件名，:hover当光标位于DIV. 这不是我想要的，因此作为解决方案，我将文件名放在 a 中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>
4

3 回答 3

24

像这样？（注意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>
于 2012-04-18T21:13:42.417 回答
2

问题实际上来自SPANwith display:inline-block。您将需要删除它或将其更新为类似于此 jsFiddle 的内容。根据您的示例，我不清楚应该将其更改为什么。

我相信这种情况正在发生，因为SPAN它永远不会溢出它的 parent DIV。 至少这就是 W3 规范声明它被触发的方式。

于 2012-04-18T21:08:12.227 回答
2

将overflow和text-overflow属性从规则移动到同时针对和div的新规则。添加最大宽度。divspan

<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>​
于 2012-04-18T21:12:10.493 回答