Comment puis-je découper du texte avec des points de suspension dans les cellules d'un tableau à l'aide de CSS ?

Découpage du texte avec des points de suspension dans les cellules du tableau à l'aide de CSS

Question :

Pouvez-vous découper texte dans une cellule de tableau avec des points de suspension au lieu de lui permettre d'être renvoyé à plusieurs lignes ?

Solution tentée :

L'utilisation des propriétés CSS overflow : masqué, text-overflow : points de suspension et white-space : nowrap n'a pas fonctionné comme prévu.

Réponse :

Pour réussir à découper le texte qui déborde dans une cellule de tableau, vous devez ajouter la propriété max-width à la classe td :

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

Cela définit la largeur maximale de chaque cellule de tableau et applique les autres propriétés pour garantir qu'elle se coupe avec des points de suspension lorsque le texte dépasse la largeur spécifiée.

Dans les mises en page réactives, vous pouvez utiliser une largeur maximale dynamique :

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

De plus, le tableau contenant nécessite une largeur spécifique :

table {
  width: 100%;
}

Les largeurs des cellules du tableau peuvent être définies sous forme de pourcentages :

td.column_a {
  width: 30%;
}
td.column_b {
  width: 70%;
}

Pour les anciennes versions d'Internet Explorer (IE 9 ou moins), ce code supplémentaire 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!