Pourquoi « text-overflow : ellipsis » ne fonctionne-t-il pas comme prévu avec Flexbox ?

text-overflow ne se comporte pas avec Flexbox

Dans cet exemple, nous avons un conteneur flexible avec le contenu texte "ThisIsASampleText". Lorsque nous définissons la propriété « display » sur « flex » et « text-overflow » sur « points de suspension », nous nous attendons à ce que le texte soit tronqué, mais cela ne fonctionne pas comme prévu.

En inspectant le code, nous remarquons que la propriété flex est appliquée à l'élément conteneur. Cependant, les styles flexbox doivent être appliqués aux éléments enfants pour affecter leur disposition et leurs propriétés.

Pour résoudre ce problème, nous pouvons déplacer le "débordement de texte" et les styles associés vers une classe distincte pour les enfants flex. Voici le code modifié :

.flex-container {<br> display: flex;<br> text-align: left;<br>}<p>.flex-child {<br> espace blanc : nowrap ;<br> overflow : caché ;<br> text-overflow : points de suspension ;<br>}</p><p></p><h1 id="Boîtes-flexibles">Boîtes flexibles</h1><br><div> <span class="flex-child">ThisIsASampleText</span><br>
</div>

En appliquant les styles de troncature à la classe ".flex-child", nous tronquer correctement le texte en "ThisIsASam..." dans le conteneur flex. Pour une explication détaillée, reportez-vous à l'article de référence de CSS Tricks lié ci-dessous.

Référence : 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!