Comment tronquer correctement le texte dans les cellules d'un tableau avec CSS ?

Tronquage du texte dans les cellules d'un tableau avec dépassement de texte CSS

Dans la conception Web, la nécessité de gérer le texte qui dépasse la largeur des cellules du tableau se pose fréquemment. En utilisant CSS, vous pouvez tronquer le texte avec des points de suspension pour éviter le retour à la ligne tout en conservant une disposition de tableau concise et organisée.

Problème : Malgré les tentatives d'application des attributs de débordement CSS et de débordement de texte, le texte à l'intérieur les cellules du tableau continuent de s'enrouler sur plusieurs lignes ou s'étendent au-delà de la largeur du tableau.

Solution : Pour efficacement tronquer le texte avec des points de suspension, vous devez également définir la propriété max-width pour chaque classe de cellule de tableau (td). Cette contrainte permet de découper le texte à la largeur spécifiée.

Voici le code CSS mis à jour :

td {
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Pour garantir la réactivité, pensez à utiliser max-width: 0px; pour une flexibilité de largeur illimitée. Vous pouvez également définir une largeur spécifique pour la table contenant (généralement largeur : 100 % ;) et définir les largeurs de colonnes en pourcentage de la largeur totale.

Par exemple :

table { width: 100%; }
td {
  max-width: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
td.column_a { width: 30%; }
td.column_b { width: 70%; }

Remarque : Pour Internet Explorer 9 ou version antérieure, vous devrez peut-être ajouter le HTML suivant pour corriger un rendu problème :

<!--[if IE]>
<style>
  table {
    table-layout: fixed;
    width: 100px;
  }
</style>
<![endif]-->

En suivant ces étapes, vous pouvez tronquer efficacement le texte dans les cellules du tableau avec des points de suspension, garantissant ainsi une disposition du tableau propre et contrôlée.

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!