Comment faire fonctionner les points de suspension de débordement de texte dans les cellules d'un tableau ?

Les points de suspension insaisissables : découvrir le défi CSS dans les cellules d'un tableau

Considérons un scénario simple : vous souhaitez afficher un long texte dans une cellule d'un tableau, tout en limitant sa largeur à 50 pixels. Naturellement, vous utilisez les propriétés CSS pour y parvenir : text-overflow : points de suspension, espace blanc : nowrap et une largeur définie. Cependant, à votre grande surprise, les points de suspension sont introuvables, vous laissant perplexe.

Pour comprendre le problème, approfondissons la spécification CSS. La propriété text-overflow affecte les éléments en ligne, ce que ne sont pas les cellules du tableau par défaut. Pour activer les points de suspension, nous devons définir explicitement display: block ou display: inline-block pour les cellules du tableau. Cela leur confère un comportement de type en ligne, permettant à la propriété text-overflow de prendre effet.

Vous pouvez également opter pour une autre approche. En définissant table-layout:fixed; pour le tableau et en spécifiant sa largeur, vous forcez la largeur à être répartie uniformément entre les cellules. Cela permet également d'établir des points de suspension dans les cellules.

Voici à quoi ressemblerait le code avec ces solutions :

<code class="css">td {
  display: block; /* or inline-block */
  border: 1px solid black;
  width: 50px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

ou

<code class="css">table {
  table-layout: fixed;
  width: 150px;
}
td {
  border: 1px solid black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}</code>

La mise en œuvre de l'une ou l'autre de ces solutions permettra résoudre le problème, permettant aux points de suspension de fonctionner comme prévu dans les cellules du tableau.

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!