html - 使用 :after pseudo selector 的省略号样式文本切割与尾随图标相结合

Question

我想可视化使用省略号样式缩短的长标题。效果很好，符合预期。

在某些情况下，我需要文本获得一个尾随图标(以调用一个 Action )。通常我使用 :after css 伪选择器来实现。

但是我无法让这两个细节一起工作。无论我尝试什么，图标都没有真正按照需要放置在文本之后，而是在下一行。因此浏览器使用了换行符，尽管我试图阻止这种情况(作为省略号样式的一部分)。简单地指定 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;
}
​

我准备了一个简单的demo作为一个 fiddle 手。

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

Answer 1

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

一个解决方案可能是将图标放在外面文本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;
}

这是一个 working demo .如果您必须让图标 [看起来] 与文本(金色)在一起，我相信您必须创建另一个嵌套包装器(如 this )。