Pourquoi « overflow : hidden » ne fonctionne-t-il pas dans les cellules de mon tableau () ?

Le débordement ne fonctionne pas dans  : un correctif CSS

Le débordement : caché peut ne pas fonctionner comme prévu dans

Le nœud du problème réside dans le comportement par défaut des éléments du tableau. Les tableaux utilisent généralement une disposition fluide, dans laquelle la largeur des cellules s'agrandit et se contracte en fonction du contenu. Pour remplacer cela, nous devons spécifier une disposition de tableau fixe :

table {
  table-layout: fixed;
}

De plus, la définition d'une largeur fixe sur le conteneur du tableau limite la taille globale disponible pour les cellules du tableau :

table {
  ...
  width: 200px;  

Enfin, pour véritablement contraindre le contenu de la cellule, nous appliquons overflow:hidden aux cellules du tableau et white-space: nowrap pour empêcher les mots wrap :

td {
  ...
  overflow: hidden;
  white-space: nowrap;
}

Ces ajustements combinés garantissent que le contenu du texte est tronqué au bord de la cellule, l'empêchant ainsi de déborder.

Example

Considérons cet exemple modifié :

Maintenant, le texte sera coupé à la largeur de cellule de 100 px, comme vous le souhaitez.

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!