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

css flexbox

Question

.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

Answer 1

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.

Answer 2

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>

Answer 3

Su problema aquí es la falta de "flex-children". Estos tendrían que contener los estilos para truncar un elemento, no el contenedor principal.

Intente mover las propiedades de truncado a una clase .flex-child separada de .flex-child forma:

.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Fuente y explicación detallada: https://css-tricks.com/flexbox-truncated-text/

Answer 4

añadir propiedad abajo en la clase css

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

Answer 5

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

.text-container {
   min-width: 0;
   text-overflow: ellipsis;
   overflow: hidden;
}

<h1>Flexible Boxes</h1>
<div class="flex-container" style="height: 12%; width:14%">
    <div class="text-container">ThisIsASampleText</div>
</div>

https://brainlessdeveloper.com/2017/07/29/why-wont-my-text-overflow/