css - tamaño - ajustar texto en boton html

El texto en un contenedor flexible no se ajusta en IE11

Question

Considere el siguiente fragmento:

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

En Chrome, el texto se ajusta como se esperaba:

Pero, en IE11, el texto no se ajusta :

¿Es este un error conocido en IE? (en caso afirmativo, se apreciará un puntero)

¿Hay una solución conocida?

Esta pregunta similar no tiene una respuesta definitiva y un puntero oficial.

Answer 1

¿Por qué usar una solución complicada si también funciona una simple?

.child {
  white-space: normal;
}

Answer 2

Agregue esto a su código:

.child { width: 100%; }

Sabemos que se supone que un hijo de nivel de bloque ocupa todo el ancho del padre.

Chrome entiende esto.

IE11, por cualquier razón, quiere una solicitud explícita.

El uso flex-basis: 100% o flex: 1 también funciona.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  align-items: center;
}
.child {
  border: 1px solid blue;
  width: calc(100% - 2px);       /* NEW; used calc to adjust for parent borders */
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Nota: A veces será necesario clasificar los distintos niveles de la estructura HTML para determinar qué contenedor obtiene el width: 100% . El texto de ajuste CSS no funciona en IE

Answer 3

Como Tyler ha sugerido en uno de los comentarios aquí, usando

max-width: 100%;

en el niño puede trabajar (trabajó para mí). Usar align-self: stretch solo funciona si no está usando align-items: center (lo cual hice). width: 100% solo funciona si no tiene varios hijos dentro de su flexbox que desea mostrar uno al lado del otro.

Answer 4

De alguna manera, todas estas soluciones no funcionaron para mí. Claramente, hay un error de IE en flex-direction:column .

Solo lo hice funcionar después de eliminar flex-direction :

flex-wrap: wrap;
align-items: center;
align-content: center;

Answer 5

Hola, tuve que aplicar el ancho del 100% a su elemento abuelo. No es su elemento (s) hijo (s).

.grandparent {
    float:left;
    clear: both;
    width:100%; //fix for IE11 text overflow
}

.parent {
    display: flex;
    border: 1px solid red;
    align-items: center;
}

.child {
    border: 1px solid blue;
}

Answer 6

La única forma en que he podido evitar el 100% de este error de columna de dirección flexible consiste en utilizar una consulta de medios de ancho mínimo para asignar un ancho máximo al elemento secundario en pantallas de tamaño de escritorio.

.parent {
    display: flex;
    flex-direction: column;
}

//a media query targeting desktop sort of sized screens
@media screen and (min-width: 980px) {
    .child {
        display: block;
        max-width: 500px;//maximimum width of the element on a desktop sized screen
    }
}

Deberá establecer elementos secundarios en línea de forma natural (por ejemplo, <span> o <a> ) en algo que no sea en línea (principalmente display: block o display: inline-block) para que la corrección funcione.

Answer 7

Las soluciones propuestas no me ayudaron con ".child {width: 100%;}", ya que tenía un marcado más complicado. Sin embargo, encontré una solución: eliminar "align-items: center;", y también funciona para este caso.

.parent {
  display: flex;
  flex-direction: column;
  width: 400px;
  border: 1px solid red;
  /*align-items: center;*/
}
.child {
  border: 1px solid blue;
}

<div class="parent">
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
  <div class="child">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry
  </div>
</div>

Answer 8

Tuve el mismo problema y el punto es que el elemento no estaba adaptando su ancho al contenedor.

En lugar de usar width:100% , sea ​​consistente (no mezcle el modelo flotante y el modelo flexible) y use flex agregando esto:

.child { align-self: stretch; }

O:

.parent { align-items: stretch; }

Esto funcionó para mí.