css - palabra - truncar texto con puntos suspensivos

Puntos suspensivos de texto CSS cuando se utilizan divs de ancho variable

Question

Me pregunto si hay alguna forma 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 se desvanecerá, pero cuando no haya más espacio, los puntos suspensivos nunca se activarán.

Lo único que se me ocurre es desencadenar 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/

Answer 1

Mi empresa aún no admite CSS3, pero pude resolver el problema con otra solución. Al aplicar el atributo float solo al icono div y al colocarlo primero en el HTML, el otro div se mantendrá alineado verticalmente al mismo tiempo que se truncará cuando no haya suficiente espacio.

Ejemplos: (icono a la derecha) http://jsfiddle.net/qftWN/ , (icono a la izquierda) http://jsfiddle.net/Nr2NN/

Answer 2

Puede usar el diseño de caja flexible de CSS3 para hacer esto de manera bastante intuitiva:

.parent-div {
    display: flex;
}

.text-div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    

    min-width: 0;
}

.icon-div {
    flex: 1;
}​

Demostración: jsfiddle.net/Blender/kXMz7/1