Ich habe Text, der in einer einzelnen Zeile in einem Container mit fester Breite angezeigt wird. Wenn der Text nicht in der Breite des Containers enthalten sein kann, wird der Überlauf ausgeblendet. Jede Kombination von drei Statussymbolen kann von der rechten Seite des Containers aus angezeigt werden. Wenn eines dieser Symbole angezeigt wird, möchte ich, dass der Textüberlauf ausgeblendet wird, bevor das erste Symbol angezeigt wird, damit der Text nicht hinter den Symbolen verborgen bleibt.Überlaufender HTML-Linientext, bevor er durch rechtsbündig ausgerichteten Inhalt verdeckt wird
Wie kann ich den Text überlaufen, so dass er nicht unter den Symbolen fließt (idealerweise nur mit CSS und nicht mit JavaScript)?
Es folgt ein Beispiel für das CSS und das HTML, von dem ich ausgegangen bin (keines von beiden ist konkret angegeben). Here's a live example des Codes, der auch das gewünschte Ergebnis zeigt (beachten Sie, es hat ein Hintergrundbild im CSS inline mit der data URI scheme so in Versionen von Internet Explorer nicht früher als 8 arbeiten).
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>
Das ist nicht sofort zur Arbeit gehen, weil ich CSS-Sprites mit einem einzigen Bild bin mit den Symbol angezeigt wird (als ein beliebige Kombination von Symbolen für den Text erscheinen könnte).Aber ich mag die Idee mit Padding auf den Text-Container, um den Raum freizugeben. Ich denke, dass ich eine Klasse für diesen Textcontainer hinzufügen könnte, die den Typ des ersten Symbols angibt, das die entsprechende Auffüllung anwendet, um den Text zu überfüllen, wie ich es wünschen würde. –
Ich habe ein Beispiel hinzugefügt –