CSS au-delà de l'affichage...

Étapes au-delà de l'affichage des ellipses en CSS : 1. Masquez la partie du contenu du texte qui dépasse le conteneur ; 2. Assurez-vous que le texte peut s'adapter correctement à la largeur ou à la hauteur du conteneur ; la largeur ou la hauteur du conteneur masquera le contenu en excès et vous pourrez ajouter des omissions à la fin de la partie cachée 4. Utilisez les propriétés width et height de CSS pour définir la largeur ou la hauteur du conteneur ;

En CSS, lorsque le contenu du texte dépasse la largeur ou la hauteur du conteneur, des points de suspension peuvent être utilisés pour indiquer que le contenu du texte est masqué. Cet effet est souvent utilisé avec du texte long ou des titres dans des conteneurs tels que des tableaux, des listes et des cartes pour économiser de l'espace et offrir une meilleure expérience utilisateur. Ce qui suit présentera en détail comment utiliser CSS pour obtenir des effets au-delà de l'affichage des ellipses.

1. Masquage du débordement de texte

Pour obtenir l'effet au-delà de l'affichage des ellipses, vous devez d'abord masquer la partie du contenu du texte qui dépasse le conteneur. Vous pouvez utiliser la propriété CSS overflow pour définir le comportement de débordement du conteneur. Les valeurs d'attribut couramment utilisées sont :

overflow : caché ; : masquer le contenu excédentaire dans le conteneur ;

overflow : scroll ; : afficher les barres de défilement pour que les utilisateurs puissent visualiser le contenu excédentaire ;

overflow : auto ; : afficher faire défiler la bande selon les besoins.

Par exemple, si vous souhaitez masquer le contenu du texte qui dépasse la largeur du conteneur, vous pouvez définir l'attribut overflow-x du conteneur sur caché. Si vous souhaitez masquer le contenu du texte qui dépasse la hauteur du conteneur, vous pouvez le faire. peut définir l'attribut overflow-y du conteneur sur caché.

2. Habillage du texte

Après avoir masqué le contenu du texte, vous devez vous assurer que le texte peut s'adapter correctement à la largeur ou à la hauteur du conteneur. Vous pouvez utiliser la propriété CSS white-space pour contrôler la manière dont le texte est renvoyé à la ligne. Les valeurs d'attribut couramment utilisées sont :

white-space : nowrap ; : interdire le retour à la ligne du texte, tout le contenu du texte sera affiché sur une seule ligne 

white-space : normal ; : autoriser le retour à la ligne du texte, le retour à la ligne automatique ; nécessaire ;

white- space: pre; : préserve les espaces et les nouvelles lignes dans le texte, mais permet au texte de s'enrouler.

Normalement, nous devons envelopper le contenu du texte pour l'adapter à la largeur du conteneur, afin de pouvoir définir la propriété d'espace blanc du conteneur sur normale.

3. Ajouter des points de suspension

Lorsque le contenu du texte dépasse la largeur ou la hauteur du conteneur, le contenu excédentaire sera masqué. Pour rappeler à l'utilisateur, vous pouvez ajouter des points de suspension à la fin de la section masquée. Vous pouvez utiliser la propriété CSS text-overflow pour obtenir cet effet. Les valeurs d'attribut couramment utilisées sont :

text-overflow: clip; : masquer le contenu en excès et ne pas afficher les points de suspension ;

text-overflow: ellipsis ; : masquer le contenu en excès et afficher les points de suspension ;

Afin d'obtenir l'effet de points de suspension, la propriété text-overflow du conteneur doit être définie sur points de suspension.

4. Définir la largeur ou la hauteur

Enfin, afin de masquer la partie du texte au-delà du conteneur et d'afficher les points de suspension, vous devez définir la largeur ou la hauteur du conteneur. Vous pouvez utiliser les propriétés CSS width et height pour définir la largeur ou la hauteur d'un conteneur.

En résumé, les étapes pour utiliser CSS pour obtenir un effet au-delà de l'affichage des ellipses sont les suivantes :

Définissez la propriété overflow-x ou overflow-y du conteneur sur masqué pour masquer la partie excédentaire du contenu du texte ; Changer le blanc du conteneur La propriété -space est définie sur normal pour permettre au texte de s'enrouler ;

Définissez la propriété text-overflow du conteneur sur points de suspension pour afficher les points de suspension ;

Définissez la largeur ou la hauteur du conteneur pour garantir que le contenu du texte en excès ; peut être caché.

Ce qui suit est un exemple de code qui montre comment utiliser CSS pour obtenir l'effet de dépasser l'affichage des ellipses :

<style>
.container {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
<div class="container">
  This is a long text that will be truncated with an ellipsis when it exceeds the container width.
</div>

Ce qui précède montre comment utiliser CSS pour obtenir l'effet de dépasser l'affichage des ellipses. Cet effet peut être facilement obtenu en définissant le comportement de débordement du conteneur, l'habillage du texte, le style des points de suspension et la largeur ou la hauteur du conteneur.

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!