Pourquoi le débordement de texte : les points de suspension échouent-ils dans les conteneurs Flexbox ?

Échec de la troncature des points de suspension dans les conteneurs Flexbox

Lors de l'utilisation de display: flex, la propriété text-overflow peut cesser de fonctionner comme prévu. Ce problème se pose en raison du style parent-enfant, où les propriétés de troncature doivent être appliquées aux éléments enfants individuels, et non au conteneur.

Considérons le code fourni :

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

<h1>Flexible Boxes</h1>
<div>

Dans ce scénario, les styles sont appliqués à l'élément parent .flex-container, qui ne contient pas le contenu. Pour résoudre ce problème, nous devons créer une classe distincte pour les éléments enfants :

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

De cette façon, les propriétés de troncature sont appliquées directement au contenu, garantissant ainsi une fonctionnalité appropriée dans les conteneurs flexbox.

Pour une explication détaillée et la source, reportez-vous à : https://css-tricks.com/flexbox-truncated-text/

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!