recherche

Maison >interface Web >tutoriel CSS >Comment faire en sorte que le contenu des cellules d'un tableau soit renvoyé en HTML ?

Comment faire en sorte que le contenu des cellules d'un tableau soit renvoyé en HTML ?

DDD
DDDoriginal
2024-10-27 08:57:03629parcourir

How to Make Table Cell Content Wrap in HTML?

Comment forcer une cellule de tableau Contenu à envelopper

Dans le code fourni, le texte dans le champ les éléments s’étirent lorsqu’ils sont soumis. Pour résoudre ce problème et garantir que le texte soit renvoyé à la ligne dans les cellules, les étapes suivantes peuvent être suivies :

Solution

  1. Mise en page du tableau :
    Ajouter un tableau -layout :fixé à la élément. Cet attribut spécifie que le tableau aura une disposition fixe, forçant ses colonnes à avoir les largeurs spécifiées.
  2. Word Wrap :
    Ajouter word-wrap:break-word au < ;td> éléments. Cette propriété permet le retour à la ligne des mots dans les cellules du tableau, permettant ainsi au texte long de se diviser en plusieurs lignes.

    3. Exemple

    <html><br><head> <br> <style><br> table {border-collapse:collapse; disposition de la table : fixe ; width:310px;}<br> table td {border:solid 1px #fab; largeur : 100 px ; word-wrap:break-word;}<br> </style><br></head></p>
<p><body><br> <table></p>
<pre class="brush:php;toolbar:false">  <tr>
     <td>1</td>
     <td>Lorem Ipsum</td>
     <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
  </tr>
  <tr>
     <td>2</td>
     <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
     <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
  </tr>
  <tr>
     <td>3</td>
     <td></td>
     <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
  </tr>




    DÉMO :



    table {border-collapse:collapse; disposition de la table : fixe ; width:310px;}</p>
<pre class="brush:php;toolbar:false">   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

           <table></p>
<pre class="brush:php;toolbar:false">      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>

    ”

    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!

    css html break class Attribute Property JS this border table td issue 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：Comment puis-je segmenter des cercles en tailles égales ou variables en utilisant CSS sans JavaScript ?Article suivant：Comment puis-je segmenter des cercles en tailles égales ou variables en utilisant CSS sans JavaScript ?

    Articles Liés

    Voir plus