Me pregunto si hay alguna manera de tener texto en puntos flotantes de ganancia div cuando el div padre y el div vecino no permiten suficiente espacio. Por ejemplo:

<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>

Hasta ahora, si abro la ventana del navegador, la división principal se colapsará, entonces el espacio en blanco en la división de texto desaparecerá, pero cuando ya no haya más espacio, los puntos suspensivos nunca se activarán.

Lo único que se me ocurre es activar un evento cuando la ventana cambia de tamaño y establece dinámicamente un nuevo ancho fijo en el texto-div, pero esto se siente poco elegante, especialmente considerando el relleno y otros artefactos vecinos que tendría que restar para obtener un ancho adecuado.

¿Alguna idea sobre esto?

Aquí hay una demostración de jsFiddle:http://jsfiddle.net/Blender/kXMz7/