css tamaño - El texto en un contenedor flexible no se ajusta en IE11





ajustar de (5)


Tuve el mismo problema y el hecho 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 flex) y use flex agregando esto:

.child { align-self: stretch; }

O:

.parent { align-items: stretch; }

Esto funcionó para mí.

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 está envolviendo :

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




Agregue esto a su código:

.child { width: 100%; }

Sabemos que se supone que un niño de nivel de bloque ocupa todo el ancho del padre.

Chrome entiende esto.

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

Usando 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 ordenar los distintos niveles de la estructura HTML para determinar qué contenedor obtiene el width: 100% . El texto de ajuste CSS no funciona en IE




Hola, tuve que aplicar el ancho del 100% a su elemento de abuelo. No es su elemento 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;
 }



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

max-width: 100%;

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




La técnica utilizada en la respuesta aceptada funciona solo para texto de línea simple ( demo ), pero no para texto de varias líneas ( demo ), como se indica allí.

Si alguien necesita centrar verticalmente el texto de varias líneas en una imagen, aquí hay algunas formas (Métodos 1 y 2 inspirados en este artículo de CSS-Tricks )

Método # 1: tablas CSS ( FIDDLE ) (IE8 + ( caniuse ))

CSS:

div {
    display: table;
}
span {
    vertical-align: middle;
    display: table-cell;
}

Método # 2: FIDDLE en contenedor ( FIDDLE ) (IE8 +)

CSS:

div {
   height: 200px; /* height of image */
}

div:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

img {
    position: absolute;
}

span {
  display: inline-block;
  vertical-align: middle;
  margin-left: 200px;  /* width of image */
}

Método # 3: Flexbox ( FIDDLE ) ( caniuse )

CSS (El violín anterior contiene prefijos de proveedor):

div {   
    display: flex; 
    align-items: center;    
}
img {
    min-width: 200px; /* width of image */
}




css css3 internet-explorer flexbox internet-explorer-11