Comment forcer le retour à la ligne du texte dans les cellules du tableau ?

Comment appliquer le retour à la ligne du texte dans les cellules du tableau

Problème

Dans un tableau de données avec un texte long dans certaines cellules, les cellules se développent unilatéralement plutôt que envelopper le texte. Une classe CSS (wrapable) a été implémentée, mais le problème persiste. Le tableau est contenu dans un div, ce qui soulève la question de savoir si une manipulation du div et de la largeur du tableau est nécessaire.

Solution

Pour forcer le retour à la ligne du texte dans les cellules du tableau, utilisez les propriétés CSS suivantes :

<code class="css">table {
  table-layout: fixed;
}

td {
  word-wrap: break-word;
}</code>

Explication :

• table-layout:fixed garantit que la largeur de toutes les colonnes est fixe, empêchant les cellules de se développer horizontalement.
• word-wrap : le saut de mot provoque la rupture du texte et son passage à la ligne suivante lorsqu'un mot est trop long pour tenir dans la largeur de la colonne.

Exemple

Voici un exemple pour illustrer la solution :

<code class="html"><style>
  table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 310px;
  }

  td {
    border: solid 1px #fab;
    width: 100px;
    word-wrap: break-word;
  }
</style>

<table border="1">
  <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></code>

Conclusion

En implémentant table-layout: fixed et word-wrap: break-word, vous pouvez facilement appliquer le retour à la ligne du texte dans les cellules du tableau, garantissant que le la disposition du tableau reste cohérente et lisible quelle que soit la longueur du texte.

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!