Comment implémenter un débordement de texte CSS avec des points de suspension dans une cellule de tableau ?

Débordement de texte CSS dans une cellule de tableau

L'objectif est d'implémenter un débordement de texte CSS dans une cellule de tableau, garantissant que le texte dépassant la la largeur de la cellule est coupée avec des points de suspension, l'empêchant de s'enrouler en plusieurs lignes.

Tentative :

Une première tentative a été effectuée en utilisant le CSS suivant :

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

Cependant, la propriété white-space: nowrap a provoqué l'expansion indéfinie du texte et de sa cellule vers la droite, dépassant le tableau conteneur.

Solution :

Pour obtenir l'effet souhaité, il faut définir la propriété CSS max-width pour chaque cellule du tableau. Voici un exemple :

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

La définition de la largeur maximale garantit que le débordement est contenu dans la largeur spécifiée.

Mises en page réactives :

Pour les mises en page réactives, envisagez d'utiliser max-width pour spécifier la largeur minimale de la colonne ou de la définir sur max-width : 0 ; pour une flexibilité totale. Le tableau conteneur doit avoir une largeur spécifique, telle que width : 100%;.

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%;}

Considérations relatives à IE :

Pour IE 9 ou version antérieure, le code HTML suivant un hack est nécessaire pour résoudre un problème de rendu :

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