html - el desbordamiento de texto no funciona cuando se usa display: flex




css flexbox (4)

En su configuración, tiene un elemento de contenedor anónimo de bloque que contiene su texto (puede referirse a la especificación para esto). El elemento flexible obedecerá a la restricción de min-width por lo que no se reducirá, sino que se desbordará y, dado que es un bloque anónimo, no tiene forma de aplicar min-width .

Además de esto, las propiedades de desbordamiento deben aplicarse al elemento flex y no al contenedor flex ya que este contiene el texto y la propiedad de desbordamiento no se hereda. En otras palabras, cuando use flexbox, tendrá dos niveles: el contenedor de flex y los elementos de flex. Necesitas aplicar todo al elemento flex.

Supongamos que agregamos un span alrededor de nuestro texto que tendremos esto:

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  <span>ThisIsASampleText</span>
</div>

Ahora podemos apuntar al elemento flexible para agregar min-width:0 y las propiedades necesarias para obtener el resultado esperado:

.flex-container {
  display: flex;
  text-align: left;
}

span {
  min-width:0;
  text-overflow: ellipsis;
  overflow: hidden;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  <span>ThisIsASampleText</span>
</div>

Sin la envoltura adicional, no podemos apuntar a nuestro elemento flexible y la aplicación de las propiedades al contenedor flexible no hará nada.

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
  ThisIsASampleText
</div>

Output: ThisIsASamp  
Expected: ThisIsASam...

Cuando quito la propiedad flex está funcionando bien.

Me gustaría saber por qué la flexión afecta a la elipsis.

TIA


Puedes hacer algo como esto

.flex-container {
  display: flex;
}

.flex-container p {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
<p>
  ThisIsASampleText </p>
</div>


añadir propiedad abajo en la clase css

white-space: nowrap;
word-break: break-word;





ellipsis