[css] ¿Cómo evitar que un elemento flexible se desborde debido a su texto?


Answers

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

Question

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>




para mozilla debes agregar "min-width: 1px";




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/






Links