Pourquoi « text-overflow » ne fonctionne-t-il pas avec Flexbox et comment puis-je y remédier ?

Pourquoi le dépassement de texte ne fonctionne-t-il pas avec Flex Display ?

En CSS, la propriété text-overflow est utilisée pour tronquer le texte lorsqu'il dépasse la largeur disponible de son conteneur. Cependant, lorsqu'il est utilisé avec display: flex, il peut ne pas fonctionner comme prévu.

Considérez le code suivant :

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

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

Dans cet exemple, le flex-container est un conteneur flexbox, et le texte dans son div enfant devrait être tronqué. Cependant, vous pouvez rencontrer le résultat suivant :

Output: ThisIsASamp  
Expected: ThisIsASam...

Si vous supprimez la propriété display: flex, la troncature du texte fonctionne comme prévu. Alors, quel est le problème ?

Le problème réside dans la manière dont display: flex répartit l'espace au sein du conteneur. Sans flexion, le texte est compressé dans la largeur disponible et tronqué en conséquence. Cependant, lorsque flex est appliqué, l'élément enfant (le div) devient un élément flex et hérite des propriétés flexbox du conteneur.

Pour résoudre ce problème, vous devez styliser explicitement l'élément enfant pour tronquer son texte. Une façon d'y parvenir consiste à créer une classe distincte pour les enfants flex et à appliquer les styles appropriés :

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

En appliquant ces styles à l'élément enfant, vous vous assurez qu'il enveloppe son texte et le tronque lorsque nécessaire, même dans un conteneur flexbox.

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!