Comment créer un habillage de texte long dans les cellules d'un tableau HTML ?

Word-Wrap dans les tableaux HTML : briser le texte long dans les cellules

Word-wrap est une propriété CSS précieuse qui permet au texte d'être renvoyé à la ligne. conteneurs spécifiés, tels que divs et spans. Cependant, sa fonctionnalité peut être compromise lorsqu'elle est appliquée aux cellules d'un tableau. Dans certains scénarios, le texte peut dépasser les limites de la cellule au lieu d'être renvoyé comme prévu.

Dans ce cas, le problème provient du comportement par défaut des éléments de cellule de tableau. Par défaut, les tableaux HTML sont conçus pour les données tabulaires et leur contenu est destiné à s'adapter à la largeur spécifiée de chaque colonne. Par conséquent, lorsque le texte dépasse la largeur d'une cellule, il est rendu en dehors des limites de la cellule.

Pour résoudre ce problème, une solution consiste à ajouter l'attribut CSS table-layout:fixed à l'élément table. Cet attribut demande au navigateur de corriger la disposition du tableau, empêchant les cellules de s'étendre au-delà de leur largeur définie. Par conséquent, le texte dans les cellules est forcé d'être renvoyé à la ligne lorsqu'il atteint la largeur de cellule spécifiée.

Voici l'extrait de code mis à jour avec l'attribut table-layout :fixed appliqué :

Après en intégrant ce changement, le mot long de la première colonne sera désormais renvoyé dans les limites de la cellule, l'empêchant de s'étendre au-delà de la largeur du tableau.

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!