【发布时间】：2010-11-07 06:24:45
【问题描述】：
我有一些文本显示在具有固定宽度的容器中的单行上。如果文本不能包含在容器的宽度内，则会隐藏溢出。三个状态图标的任意组合都可能出现在容器右侧。如果出现这些图标中的任何一个，我希望在第一个图标出现之前隐藏文本溢出，以便文本不会在图标后面显得模糊。
如何使文本溢出，使其不在图标下方流动（理想情况下只使用 CSS 而无需求助于 JavaScript）？
下面是我开始使用的 CSS 和 HTML 示例（两者都没有具体设置）。 Here's a live example 的代码也说明了所需的结果（请注意，它有一个使用 data URI scheme 在 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>
【问题讨论】：
标签： html positioning css