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
921 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!

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