Ich frage mich, ob es eine Möglichkeit gibt, Text in einer schwebenden Div-Auslassungspunkt-Ellipse zu haben, wenn das übergeordnete Div und das benachbarte Div nicht genug Platz lassen. Zum Beispiel:

<style>
.parent-div {
    width: 100%;
    border: 1px;
    padding: 4px;
}
.text-div {
    float: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}
.icon-div {
    float: left;
}
</style>
<div class="parent-div">
  <div class="text-div">This is text I'd like to truncate when space doesn't permit</div>
  <div class="icon-div">X</div>
</div>

Wenn ich bisher das Browserfenster einschränke, wird das übergeordnete Div minimiert, und der Leerraum in Text-Div verschwindet. Wenn jedoch kein Platz mehr vorhanden ist, wird die Ellipse nie aktiviert.

Ich kann mir nur vorstellen, ein Ereignis auszulösen, wenn die Größe des Fensters geändert und eine neue feste Breite für text-div dynamisch festgelegt wird. Dies wirkt jedoch nur unelegant, insbesondere in Anbetracht des Auffüllens und anderer benachbarter Artefakte, die ich herausziehen müsste, um zu erhalten eine angemessene Breite.

Irgendwelche Gedanken dazu?

Hier ist eine jsFiddle-Demo:http://jsfiddle.net/Blender/kXMz7/