Flexbox y texto truncado | Programar Plus

0

Situación: tiene una sola línea de texto en un elemento secundario flexible. No desea que el texto se ajuste, lo desea truncar con puntos suspensivos (o volver a ocultar el desbordamiento). Pero sucede lo peor. ¡Lo impensable! El diseño se rompe y fuerza todo el elemento padre flexible demasiado ancho. ¡Se supone que Flexbox ayuda a facilitar el diseño!

Afortunadamente, existe una solución (estandarizada). Solo necesita usar una propiedad / valor que no sea de flexbox para hacerlo.

Lo que nosotros queremos

GIF animado que muestra el texto truncado a medida que el niño flexible se vuelve más estrecho.

El problema potencial

GIF animado que muestra el texto no envolvente que evita que el padre flexible se vuelva más estrecho.

Esto no solo podría evitar el estrechamiento de un recipiente, sino que también podría hacer que un recipiente se ensanche mucho.

Los elementos secundarios (del niño flexible) son el problema

Confundir un poco las cosas … si el texto en cuestión está directamente dentro del niño flexible, las cosas funcionan bien:

<div class="flex-parent">
  <div class="flex-child">
    Text to truncate here.
  </div>
  <div class="flex-child">
    Other stuff.
  </div>
</div>
/* Text is directly within flex child,
   so doing the wrapping here */
.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

El problema surge cuando hay elementos secundarios, como:

<div class="flex-parent">
  <div class="flex-child">
    <h2>Text to truncate here.</h2>
  </div>
  <div class="flex-child">
    Other stuff.
  </div>
</div>
/* Text is a header now,
  so need to truncate there for it to work */
.flex-child > h2 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

La solucion es min-width: 0; en el niño flexible

O min-width algún valor real. Sin esto, el elemento secundario flexible que contiene los otros elementos de texto no se reducirá más allá del “ancho implícito” de esos elementos de texto.

Cuando me encontré con este problema por primera vez, encontré la solución a través de un lápiz de AJ Foster. El escribe:

De acuerdo con una especificación preliminar, el texto anterior no debería colapsar por completo cuando se cambia el tamaño del contenedor flexible. Debido a que .subtitle tiene un ancho de 100%, el cálculo de min-width: auto que hace flexbox dice que su contenedor debe ser más grande de lo que queremos.

Encontré este comportamiento consistente en Chrome, Opera y Firefox. Safari se estaba reduciendo / truncando incluso sin el ancho mínimo (en contra de las especificaciones, creo).

Manifestación

Vea el Pen Thing que debe saber sobre flexbox por Chris Coyier (@chriscoyier) en CodePen.

  1. Funciona: el texto está directamente dentro de flex child
  2. Roto: el texto está en un <h2> dentro de niño flexible
  3. Obras: el texto está en <h2>, pero min-width fijado en niño flexible
(Visited 16 times, 1 visits today)