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

Comment utiliser le débordement de texte CSS dans une cellule de tableau

Vous pouvez rencontrer une situation dans laquelle vous souhaitez afficher du texte dans une cellule de tableau , mais le texte est trop long pour tenir confortablement sur une seule ligne. Vous souhaitez découper le texte avec des points de suspension ("...") au lieu de lui permettre de s'enrouler sur plusieurs lignes.

Pour y parvenir, vous pouvez exploiter les propriétés CSS telles que "text-overflow" et 'débordement'. Cependant, l'utilisation de « white-space : nowrap » peut entraîner un problème spécifique : le texte et sa cellule peuvent s'étendre continuellement vers la droite, s'étendant au-delà de la largeur prévue du tableau.

Pour résoudre ce problème, vous devez définir le Propriété CSS 'max-width' pour chaque classe 'td'. La définition de « max-width » garantit que le comportement de débordement fonctionne comme prévu :

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

Dans les mises en page réactives, vous pouvez utiliser « max-width » pour spécifier la largeur minimale de la colonne. Alternativement, vous pouvez utiliser « max-width : 0 » pour une flexibilité illimitée. Vous devez également définir une largeur pour la table contenant (par exemple, largeur : 100 %). Définissez la largeur de chaque colonne en pourcentage de la largeur totale :

table {
  width: 100%;
}

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

td.column_a {
  width: 30%;
}

td.column_b {
  width: 70%;
}

Notez qu'un problème de mise en page de tableau spécifique à IE 9 (ou inférieur) peut nécessiter du code HTML supplémentaire :

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

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!