我有一些文本显示在具有固定宽度的容器中的单行上。如果文本不能包含在容器的宽度内，则会隐藏溢出。三个状态图标的任意组合都可能出现在容器右侧。如果出现这些图标中的任何一个，我希望在第一个图标出现之前隐藏文本溢出，以便文本不会出现在图标后面。
如何使文本溢出，使其不会在图标下流动（理想情况下只使用 CSS 而不需要诉诸 JavaScript）？
下面是我开始使用的 CSS 和 HTML 的一个示例（两者都没有具体设置）。这是一个代码的实时示例，它也说明了所需的结果（请注意，它有一个使用数据 URI 方案在 CSS 中内联的背景图像，因此在 Internet Explorer 8 之前的版本中不起作用）。
CSS：
.line {
position: relative;
width: 200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.star, .circle, .flag {
position: absolute;
top: 3px;
height: 23px;
width: 15px;
background-image: url(icons.png);
}
.star {
right: 30px;
}
.circle {
right: 15px;
background-position: -17px 0;
}
.flag {
right: 0;
background-position: -32px 0;
}
HTML：
<div class="line">This is some text that should have overflow that is hidden.</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="circle"></div><div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="star"></div><div class="circle"></div><div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="star"></div><div class="flag"></div>
</div>
<div class="line">
This is some text that should have overflow that is hidden.
<div class="circle"></div>
</div>