3

我想可视化使用省略号样式缩短的长标题。这工作正常且符合预期。

在某些情况下，我需要文本来获取尾随图标（以调用操作）。通常我使用:aftercss 伪选择器来执行此操作。

但是，我无法让这两个细节一起工作。无论我尝试什么，图标并没有真正放在文本之后，而是根据需要放在下一行。所以浏览器使用了换行符，尽管我试图阻止这种情况（作为省略号样式的一部分）。简单地指定一个top值不是解决方案，因为当文本太短而无法缩短时，它会中断。

这是一个非常简单的示例来演示行为：

HTML 标记：

<div id="wrapper">
    <span id="text">some longish and wide text which should get a trailing icon when hovered</span>
</div>​

CSS定义：

#wrapper { 
    width:50%; 
    background-color: lightgray;
    margin: 10em;
    padding: 1em;
}
#text {
    font-size: 200%;
    padding: 0.2em;
    display: inline-block;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 98%;
    background-color: gold;
}
#text:hover {
    background-color: goldenrod;
}
#text:hover:after {
    content: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/playback_play.png");
    float: right;
}
​

我准备了一个简单的演示作为提琴手。

如何防止图标放置在文本下方？

4

1 回答 1

2

似乎ellipsis会使文本适合可用空间，而忽略放置在其后的元素。恕我直言，这是一个明智的设计，因为您不知道还有多少元素，以及是否会发生换行符。

一个解决方案可能是将图标放在text之外span，在包装器中。您还需要通过缩短width悬停时的文本来为其腾出空间：

#wrapper:hover #text {
    background-color: goldenrod;
    width: 74%;
}
#wrapper:hover:after {
    content: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/playback_play.png");
    float: right;
}

这是一个工作演示。如果您必须让图标 [出现] 与文本（金色）一起，我相信您必须创建另一个嵌套包装器（如this）。

于 2012-12-22T21:40:57.830 回答