css text-overflow - ¿Cómo evitar que un elemento flexible se desborde debido a su texto?





new white-space (7)


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.

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>




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



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.




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.

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/




No estoy seguro de que alguien haya optado por el writing-mode , pero creo que resuelve el problema de manera limpia y tiene un amplio soporte :

.vertical {
  //border: 1px solid green;
  writing-mode: vertical-lr;
  text-align: center;
  height: 100%;
  width: 100%;
}
.horizontal {
  //border: 1px solid blue;
  display: inline-block;
  writing-mode: horizontal-tb;
  width: 100%;
  text-align: center;
}
.content {
  text-align: left;
  display: inline-block;
  border: 1px solid #e0e0e0;
  padding: .5em 1em;
  border-radius: 1em;
}
<div class="vertical">
  <div class="horizontal">
    <div class="content">
      I'm centered in the vertical and horizontal thing
    </div>
  </div>
</div>

Esto, por supuesto, funcionará con cualquier dimensión que necesite (además del 100% de la matriz). Si elimina el comentario de las líneas de borde, será útil familiarizarse.

Demostración de JSFiddle para que juegues .

Soporte de Caniuse : 85.22% + 6.26% = 91.48% (¡incluso IE está en!)





css google-chrome flexbox css3