Maison > interface Web > tutoriel CSS > Comment créer un habillage de texte long dans les cellules d'un tableau HTML ?

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

Barbara Streisand
Libérer: 2024-12-23 11:51:07
original
252 Les gens l'ont consulté

How to Make Long Text Wrap in HTML Table Cells?

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é :

<table>
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal