Question

我希望使用省略号样式可视化缩短的长标题。这工作正常，如预期的那样。

在某些情况下，我要求文本获取一个尾随图标（以调用一个动作）。通常我使用: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作为小提琴手。

如何阻止图标放在文字下方？

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）。

省略号样式文本斩波与使用：after伪选择器的尾随图标相结合

1 个答案: