CSS au-delà de l'omission cachée

Dans la conception de sites Web, nous devons parfois afficher de longs textes ou images, mais si nous les affichons tous directement, la page deviendra très déroutante. À l'heure actuelle, nous devons utiliser au-delà de l'omission cachée dans CSS pour résoudre ce problème.

1. Concepts de base

Le débordement de texte en CSS est une technologie qui masque et omet le texte qui dépasse la zone d'affichage dans un élément. Cette technique est couramment utilisée dans divers scénarios tels que les tableaux, les listes, les en-têtes et les menus de navigation.

Au-delà de l'omission cachée est principalement obtenu grâce aux trois attributs suivants :

1 : défini sur nowrap pour empêcher le texte de s'enrouler.

2. Débordement : définir sur masqué pour masquer la partie de la zone de débordement de texte.

3. text-overflow : définir sur les points de suspension, ce qui signifie utiliser trois points (...) dans la zone d'affichage pour omettre la partie au-delà de la zone.

Les trois attributs ci-dessus doivent être utilisés en même temps pour obtenir des effets au-delà de l'omission cachée.

2. Scénarios d'application

1 Tableau

Dans le tableau, si le contenu du texte d'une certaine cellule est trop long, le tableau entier deviendra difficile à lire et à formater. À l'heure actuelle, nous pouvons utiliser la technique au-delà du masquage et de l'omission pour masquer le contenu du texte au-delà de la plage de cellules afin de conserver la beauté et la lisibilité du tableau.

L'exemple de code est le suivant :

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

2. Liste

Dans la liste, si le contenu du texte de l'élément de la liste est trop long , cela affectera également la typographie et l’esthétique. Utilisez la technique au-delà du masquage et de l'omission pour masquer et omettre le contenu textuel qui dépasse la plage, rendant ainsi la liste plus ordonnée.

L'exemple de code est le suivant :

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

3. Titre

Dans le titre, si le titre est trop long, cela affectera également la beauté et la mise en page de la page. Utilisez la technique au-delà de la masquage-omission pour masquer et omettre le contenu du titre au-delà de la portée, rendant le titre plus concis et clair.

L'exemple de code est le suivant :

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

4. Menu de navigation

Dans le menu de navigation, si le contenu textuel d'un certain élément est trop longtemps, cela affectera la présentation et l'esthétique de l'ensemble du menu de navigation. Utilisez la technique au-delà du masquage et de l'omission pour masquer et omettre le contenu du texte au-delà de la portée, rendant ainsi le menu de navigation plus soigné et plus facile à lire.

L'exemple de code est le suivant :

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

3. Résumé

Au-delà de la technologie d'omission cachée est une technologie très pratique en CSS et convient à une variété d'applications Les scènes peuvent améliorer efficacement la beauté et la lisibilité de la page. Dans le développement front-end, cette technologie doit être utilisée de manière appropriée selon les besoins. Dans le même temps, nous devons également prêter attention à certains détails, comme ne pas omettre trop de texte, afin de ne pas affecter la transmission des informations et l'expérience de lecture de la page par l'utilisateur.

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!