Elipsis de texto CSS al usar divisiones de ancho variable

Me pregunto si hay alguna forma de tener texto en una elipsis de ganancia div flotante cuando el div principal y div vecino no permiten suficiente espacio. Por ejemplo:Elipsis de texto CSS al usar divisiones de ancho variable

<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 Crunch la ventana del navegador, el div padre colapsará, entonces el espacio en blanco en el texto-div desaparecerá, pero cuando no hay más espacio, los puntos suspensivos no entran en juego.

la única cosa que puedo pensar que hacer es disparar un evento cuando cambia el tamaño de la ventana y establecer dinámicamente un nuevo ancho fijo en el texto-div, pero esto sólo se siente poco elegante, especialmente teniendo en cuenta el relleno y otros artefactos vecinos que tendría que restar para obtener un ancho adecuado.

¿Alguna idea de esto?

He aquí una demostración jsFiddle: http://jsfiddle.net/Blender/kXMz7/

Fuente

2012-09-29 Anthony

Si no se preocupan por el apoyo a los navegadores más antiguos, se puede utilizar para hacer de este FlexBox bastante simple: http: // jsFiddle. net/Blender/kXMz7/1/ – Blender

¡Eso funciona perfecto Blender! No estoy soportando navegadores antiguos, así que funciona bien. :) Al parecer, no funciona cuando se coloca dentro de una mesa, pero puedo evitarlo. ¡Gracias! Si publica su respuesta por separado, la marcaré como la correcta. – Anthony

Puede utilizar boxlayout flexibles de CSS3 para hacer esto 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: http://jsfiddle.net/Blender/kXMz7/1/

Fuente

2012-09-29 21:37:49 Blender

¡Funciona perfecto! Gracias Blender! – Anthony

+1 ya que la solución funciona perfectamente. Aunque tenga en cuenta que el Diseño de cuadro flexible aún se encuentra en la etapa de Recomendación del candidato y no es ampliamente compatible. Funcionará en Chrome, Firefox, Safari con el prefijo del proveedor. Internet Explorer solo comenzó a admitir esta función en IE10. http://caniuse.com/flexbox – Michael

¡Estaba buscando esta respuesta por bastante tiempo! Gracias :-) – Rikki

Mi empresa no es compatible con CSS3 aún , pero pude resolver el problema con otra solución. Al aplicar el atributo float solo al icono div y colocarlo primero en el HTML, el otro div permanecerá verticalmente alineado mientras también se trunca cuando no hay suficiente espacio.

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

Fuente

2013-06-20 00:51:04

¡gracias! Este truco ordenado funciona y me salvó un montón de problemas. :) – gnclmorais

muchas gracias !! – user1110977

Elipsis de texto CSS al usar divisiones de ancho variable

Respuesta

Cuestiones relacionadas