Comment obtenir un débordement de texte CSS avec des points de suspension dans les cellules d'un tableau ?

Débordement de texte CSS dans les cellules d'un tableau

Réaliser un débordement de texte dans les cellules d'un tableau peut être un défi. Lors de l'utilisation du débordement de texte : les points de suspension seuls peuvent ne pas suffire, nous pouvons utiliser des propriétés CSS supplémentaires pour obtenir l'effet souhaité.

Solution

Pour découper le texte avec des points de suspension et pour éviter le retour à la ligne, nous définissons la propriété max-width pour chaque cellule du tableau (élément td). Ceci spécifie la largeur maximale disponible pour le texte avant qu'il ne soit tronqué. De plus, overflow : Hidden garantit que le texte en excès est masqué.

Code CSS

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

Mise en page réactive

Pour Dans les mises en page réactives, la propriété max-width peut être utilisée pour définir la largeur minimale effective de la colonne. Vous pouvez également définir max-width: 0; permet une flexibilité illimitée. La table contenant doit avoir une largeur spécifique, généralement définie sur width : 100 % ;.

Note historique

Pour Internet Explorer 9 et les versions antérieures, un < style> la balise doit être incluse dans le code HTML pour résoudre les problèmes 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!