css - varias - text-overflow ellipsis not working
¿Cómo evitar que un elemento flexible se desborde debido a su texto? (7)
Esta pregunta ya tiene una respuesta aquí:
Tengo el siguiente diseño en mente para una lista. Cada elemento de la lista está representado por dos columnas. La segunda columna debe ocupar todo el espacio disponible, pero debe anclarse a la derecha con su tamaño mínimo si la primera columna ocupa demasiado espacio. La primera columna debería mostrar una elipsis.
El problema está sucediendo en ese último caso. Cuando la primera columna consiste en demasiado texto, en lugar de mostrar una elipsis, se extiende fuera de la caja flexible haciendo que aparezca una barra de desplazamiento horizontal, y la segunda columna no está anclada a la derecha.
Me gustaría que se renderice así (maqueta):
¿Cómo puedo lograr eso?
Este es un violín de muestra .
.container {
display: -webkit-flex;
}
div {
white-space: nowrap;
text-overflow: ellipsis;
}
.container > div:last-child {
-webkit-flex: 1;
background: red;
}
<!-- a small first column; the second column is taking up space as expected -->
<div class="container">
<div>foo barfoo bar</div>
<div>foo bar</div>
</div>
<!-- a large first column; the first column is overflowing out of the flexbox container -->
<div class="container">
<div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
<div>foo bar</div>
</div>
ACTUALIZAR
Agregar código que funciona:
.container {
display: -webkit-flex;
}
.container>div:first-child{
white-space:nowrap;
-webkit-order:1;
-webkit-flex: 0 1 auto; /*important*/
text-overflow: ellipsis;
overflow:hidden;
min-width:0; /* new algorithm overrides the width calculation */
}
.container > div:last-child {
-webkit-flex: 1;
-webkit-order:2;
background: red;
-webkit-flex:1 0 auto; /*important*/
}
.container > div:first-child:hover{
white-space:normal;
}
<div class="container">
<div>foo barfoo bar</div>
<div>foo bar</div>
</div>
<div class="container">
<div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
<div>foo bar</div>
</div>
<div class="container">
<div>foo barfoo bar</div>
<div>foo bar</div>
</div>
<div class="container">
<div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
<div>foo bar</div>
</div><div class="container">
<div>foo barfoo bar</div>
<div>foo bar</div>
</div>
Respuesta / explicación original.
La especificación W3C dice: " Por defecto, los artículos flexibles no se contraerán por debajo de su tamaño de contenido mínimo (la longitud de la palabra más larga o elemento de tamaño fijo). Para cambiar esto, establezca ''min-width'' o ''min-height'' propiedad " .
Si seguimos esta línea de razonamiento, creo que el error ha sido eliminado de Canary, y no al revés.
Compruebe tan pronto como coloque min-width en 0 , funciona en Canary.
Así que el error estaba en implementaciones más antiguas, y canary elimina ese error.
Este ejemplo está funcionando en canario. http://jsfiddle.net/iamanubhavsaini/zWtBu/
Utilicé Google Chrome Version 23.0.1245.0 canary.
Actualización: esta no es la respuesta. Resuelve un problema diferente, y fue un paso para encontrar la respuesta real. Así que lo guardo por razones históricas. Por favor, no votes en eso.
Creo que esta es su respuesta: http://jsfiddle.net/iamanubhavsaini/zWtBu/2/
referirse al W3C
para el primer elemento
-webkit-flex: 0 1 auto; /* important to note */
y para el segundo elemento
-webkit-flex:1 0 auto; /* important to note */
son las propiedades y valores que hacen el truco.
Lea más en http://www.w3.org/TR/2012/WD-css3-flexbox-20120612/#flex
y así es como inviertes el orden: http://jsfiddle.net/iamanubhavsaini/zWtBu/3/
y este con el ancho mínimo predefinido de la cosa con fondo rojo: http://jsfiddle.net/iamanubhavsaini/zWtBu/1/
Actualización: esta no es la respuesta. Resuelve un problema diferente, y fue un paso para encontrar la respuesta real. Así que lo guardo por razones históricas. Por favor, no votes en eso.
EDIT 2: Esta respuesta no resuelve el problema. Hay una sutil diferencia entre el objetivo de la pregunta y la respuesta.
En primer lugar, text-overflow:ellipsis funciona con overflow:hidden . En realidad, funciona con algo más que overflow:visible . Ref
Luego, repite:
http://jsfiddle.net/iamanubhavsaini/QCLjt/8/
Aquí, he puesto las propiedades de overflow y max-width . max-width:60%; y overflow:hidden es lo que hace que las cosas aparezcan como se pretendía, ya que hidden detienen la visualización del texto y el 60% realmente crea la caja de tamaño definido en caso de demasiados datos de texto.
Entonces, si realmente está interesado en el modelo de caja flexible , así es cómo funcionan las cosas a través de -webkit-order .
http://jsfiddle.net/iamanubhavsaini/QCLjt/9/
--código--
<div class="container">
<div>foo barfoo bar</div>
<div>foo bar</div>
</div>
<div class="container">
<div>foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar
foo barfoo barfoo barfoo barfoo barfoo barfoo bar</div>
<div>foo bar</div>
</div>
CSS preocupado
.container {
display: -webkit-flex;
}
div {
white-space: nowrap;
text-overflow: ellipsis;
overflow:hidden;
}
.container>div:first-child{
-webkit-order:1;
-webkit-flex: 1;
}
.container > div:last-child {
-webkit-flex: 1;
-webkit-order:2;
background: red;
}
- No hay ancho y todavía funciona. Y esto es lo que veo.
después del comentario
-webkit-order: N; es lo que usaremos después de más de 2 años en lugar de float:---; y muchos más hacks (si el W3C se mantiene en este curso y también si cada proveedor de navegadores lo sigue)
aquí, el orden es 1 para el div izquierdo y 2 para el div correcto. por lo tanto, son de izquierda a derecha.
http://jsfiddle.net/iamanubhavsaini/QCLjt/10/
Lo mismo aquí, pero solo si está buscando de derecha a izquierda, simplemente cambie el orden de las cosas como div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;} div>first-child { -webkit-order:2; } div>last-child{-webkit-order:1;}
NOTA: esta forma de hacer -webkit-flex obviamente hace que este código sea inútil en otros motores. Para, la reutilización de código, en múltiples motores de navegador debe usarse float .
a continuación hay algunos ejemplos de JS; eso no responde la pregunta, después de comentar
Creo que esto responde a su pregunta y muchos más por venir, hay algunas otras formas y soluciones diferentes, pero no es exactamente la solución para esta pregunta. http://jsfiddle.net/iamanubhavsaini/vtaY8/1/ http://jsfiddle.net/iamanubhavsaini/9z3Qr/3/ http://jsfiddle.net/iamanubhavsaini/33v8g/4/ http://jsfiddle.net/iamanubhavsaini/33v8g/1/
Debe hacer la posición del contenedor: relativa y la posición del niño: absoluta.
Este ejemplo realmente me ayudó: http://jsfiddle.net/laukstein/LLNsV/
container {
display: -webkit-flex;
-webkit-flex-direction: row;
padding: 0;
white-space: nowrap;
}
.container>div {
overflow: hidden;
display: inline-block;
-webkit-flex: 1;
min-width: 0;
text-overflow: ellipsis;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Puede establecer el tamaño preferido del niño estableciendo el tercer valor de la propiedad flex en automático, de esta manera:
flex: 1 0 auto;
Esto es una abreviatura para establecer la property flex-basis .
( Example )
Como se señaló en los comentarios, sin embargo, esto no parece funcionar en Chrome Canary, aunque no estoy seguro de por qué.
para mozilla debes agregar "min-width: 1px";