Maison > Article > interface Web > Comment puis-je effectuer un retour à la ligne automatique dans une cellule de tableau ?

Comment puis-je effectuer un retour à la ligne automatique dans une cellule de tableau ?

Susan Sarandonoriginal: 2024-10-27 02:32:30383parcourir

How can I make text wrap in a table cell?

Comment puis-je forcer le retour à la ligne automatique du texte d'une cellule de tableau () ?

Par défaut, le texte des cellules du tableau ne passe pas automatiquement à la ligne suivante, ce qui entraîne un débordement du texte en dehors de la cellule et affecte la présentation de la page.

Comment forcer le retour à la ligne< /h3>

Il existe deux méthodes principales pour forcer le retour à la ligne du texte d'une cellule de tableau :

1. Utilisez table-layout:fixed et word-wrap:break-word

Cela définit une disposition fixe pour le tableau et force le texte à être divisé en plusieurs lignes dans la largeur de la cellule. Cela fonctionne dans les navigateurs modernes.

retour à la ligne : mot de rupture ;

}

2. Utilisez
white-space: normal

Cela demande au navigateur de traiter le texte de la cellule comme du texte normal, lui permettant ainsi de s'enrouler naturellement. Cependant, cela peut ne pas fonctionner dans tous les navigateurs.

td {

white-space: normal;}

Considérations

En fonction de la mise en page de votre page, vous devrez peut-être également ajuster la largeur du tableau ou de la cellule pour garantir que le texte soit renvoyé à la ligne. comme vous le souhaitez.

De plus, si le tableau se trouve dans un conteneur flexible, tel qu'un div avec une largeur en pourcentage, le texte de la cellule peut toujours déborder du conteneur en raison de la dynamique nature de la mise en page.

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!

if for break default this overflow table td word

Déclaration：

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

Article précédent：Quelle est la différence entre les sélecteurs CSS \'div p\' et \'div ~ p\' ?Article suivant：Quelle est la différence entre les sélecteurs CSS \'div p\' et \'div ~ p\' ?

Articles Liés

Voir plus