固定幅のコンテナ内の1行に表示されるテキストがあります。コンテナの幅内にテキストを含めることができない場合、オーバーフローは非表示になります。3つのステータスアイコンの任意の組み合わせが、コンテナの右側から配置されて表示される場合があります。これらのアイコンのいずれかが表示された場合、最初のアイコンが表示される前にテキストオーバーフローを非表示にして、テキストがアイコンの後ろに隠れて表示されないようにします。
アイコンの下に流れないようにテキストをオーバーフローさせるにはどうすればよいですか（理想的にはCSSのみを使用し、JavaScriptに頼る必要はありません）。
私が始めたCSSとHTMLの例（どちらも具体的に設定されていません）は次のとおりです。これは、望ましい結果も示すコードの実際の例です（データURIスキームを使用してCSSにインライン化された背景画像があるため、8より前のバージョンのInternet Explorerでは機能しないことに注意してください）。
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>