with - html css ellipsis multiline




o estouro de texto não está funcionando ao usar o display: flex (4)

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

Quando eu remover a propriedade flex está funcionando bem.

Eu gostaria de saber porque o flex afeta as elipses.

TIA


Na sua configuração, você está tendo um item flexível de contêiner de bloco anônimo que contém seu texto (você pode consultar a especificação para isso). O item flexível obedecerá à restrição de min-width , portanto, ele não diminuirá, mas ficará sobrecarregado e, como é um bloco anônimo, você não tem como aplicar min-width a ele.

Além disso, as propriedades de overflow precisam ser aplicadas ao item flexível e não ao contêiner flexível, pois este contém o texto e a propriedade de estouro não é herdada. Em outras palavras, ao usar o flexbox, você terá dois níveis: o contêiner flexível e os itens flexíveis. Você precisa aplicar tudo ao item flexível.

Suponha que adicionemos um span torno do nosso texto e teremos isto:

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

Agora podemos segmentar o item flex para adicionar min-width:0 e as propriedades necessárias para obter a saída esperada:

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

Sem o wrapper extra, não podemos segmentar nosso item flexível e aplicar as propriedades ao contêiner flexível não fará nada.


Seu problema aqui é a falta de "flex-children". Estes precisariam conter os estilos para truncar um elemento, não o contêiner pai.

Tente mover as propriedades truncadas para uma classe .flex-child separada da .flex-child forma:

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

Fonte e explicação detalhada: https://css-tricks.com/flexbox-truncated-text/


adicione a propriedade abaixo na classe css

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





ellipsis