Maison > interface Web > tutoriel CSS > Comment envelopper du texte dans une cellule de données de tableau (

Comment envelopper du texte dans une cellule de données de tableau (

Barbara Streisand
Libérer: 2024-11-10 00:02:02
original
995 Les gens l'ont consulté

How to Wrap Text in a Table Data Cell (

Comment envelopper du texte dans une cellule de données de tableau () avec une largeur limitée

Lorsque vous essayez d'envelopper du texte dans un < ;td> élément de largeur limitée, il peut ne pas fonctionner comme prévu. Cet article vise à apporter une solution à ce problème.

Problème :

L'utilisateur souhaite envelopper le texte dans un élément, mais il n'est pas enroulé malgré l'utilisation de l'élément "word-wrap: break-word;" style et une largeur de 15%. L'utilisateur doit trouver un moyen d'envelopper le texte tout en conservant la largeur limitée.

Solution :

Pour envelopper le texte dans un élément de largeur limitée, il est nécessaire de modifier à la fois le tableau et le styles de l'élément :

  1. Style de tableau :

    • Ajoutez le CSS suivant au tableau :

      table {
          table-layout: fixed;
      }
      Copier après la connexion

    Cela définit une disposition fixe pour le tableau, permettant la largeur limitée du champ élément à appliquer.

  2. Style :

    • Ajoutez le CSS suivant au fichier element :

      td {
          word-wrap: break-word;
      }
      Copier après la connexion

    Cela active le retour à la ligne du texte dans le

En implémentant ces changements de style, le texte sera renvoyé à la ligne élément tout en respectant la contrainte de largeur de 15%.

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!

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