Pourquoi « text-overflow : ellipsis » ne fonctionne-t-il pas dans un conteneur Flex ?

Tronquer le texte avec débordement de texte dans Flex Layout

Implémentation du débordement de texte : les points de suspension pour tronquer le texte dans un conteneur flexible conduisent souvent à l'erreur les points de suspension étant absents. Cela devient évident en comparant le résultat avec le même code sans flexbox.

Code CSS :

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

Code HTML :

<h1>Flexible Boxes</h1>
<div class="flex-container">

Problème observé :

Le résultat attendu, qui devrait tronquer le texte en "ThisIsASam...", n'est pas atteint. Au lieu de cela, la sortie affiche "ThisIsASamp".

Cause :

Le problème se pose car la propriété text-overflow doit être appliquée aux enfants flex plutôt qu'au conteneur parent. . En effet, le conteneur parent comporte une seule ligne de texte, qui ne nécessite pas de troncature.

Solution :

Pour résoudre ce problème, des classes distinctes doivent être utilisées pour que les enfants contrôlent la troncature.

CSS Code :

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

Cette approche garantit que les enfants flex disposent des styles nécessaires pour tronquer le texte tandis que le conteneur parent peut toujours conserver la mise en page souhaitée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!