Comment utiliser CSS pour transformer le texte en excès en ellipses

CSS est une technologie très importante dans le développement front-end. Il joue un rôle très important dans la conception Web et le contrôle du style. Changer le texte au-delà du masquage dans les ellipses est une compétence importante dans la technologie CSS. Dans cet article, je vais vous montrer comment utiliser CSS pour transformer le texte au-delà du masqué en points de suspension.

1. Le texte dépasse le masquage

Lorsque le texte sur la page dépasse une certaine plage, il est parfois nécessaire de le masquer et d'afficher seulement une partie du texte. À l’heure actuelle, nous pouvons utiliser la propriété overflow en CSS pour y parvenir.

L'attribut overflow peut être utilisé pour contrôler la façon dont le contenu à l'intérieur d'un élément est géré lorsqu'il dépasse la zone du conteneur. Les valeurs d'attribut courantes incluent caché, visible, auto et défilement.

Lorsque nous définissons overflow:hidden, le contenu au-delà de la zone du conteneur sera masqué.

Par exemple, nous pouvons définir overflow:hidden pour un conteneur div en CSS, puis insérer beaucoup de texte. Le texte dépassera la portée du conteneur, mais sera masqué, et seulement une partie du texte dans le conteneur. peut être vu. Cela permet de masquer au-delà du texte.

2. Implémentation des ellipses

Dépasser le masquage du texte revient simplement à masquer le texte, mais dans certains cas, il ne suffit pas de masquer le texte, nous devons montrer aux utilisateurs les informations textuelles excédentaires. À ce stade, vous devez ajouter des points de suspension à la fin du texte masqué. De cette manière, les utilisateurs peuvent connaître les informations textuelles omises sans affecter la présentation globale de la page.

En CSS, nous pouvons utiliser la propriété text-overflow pour ajouter des points de suspension. L'attribut text-overflow peut être utilisé pour contrôler la façon dont le texte hors plage est affiché. La valeur habituelle est les points de suspension, ce qui signifie utiliser des points de suspension pour remplacer le texte hors plage.

Mais il convient de noter que l'attribut text-overflow ne prendra effet que lorsque les trois conditions suivantes sont remplies en même temps :

1 L'attribut white-space de l'élément doit être défini sur nowrap ou pre ;

2. L'attribut overflow de l'élément doit être défini sur masqué ou scroll ;

3. L'attribut width ou height de l'élément doit être défini sur une valeur fixe.

En partant du principe que les trois conditions ci-dessus sont remplies, nous pouvons utiliser l'attribut text-overflow pour transformer le texte hors plage en ellipses.

Par exemple, nous pouvons masquer le texte dans un conteneur div et utiliser l'attribut text-overflow pour ajouter des points de suspension :

div{

overflow: Hidden;
text-overflow: ellipsis;
white-space: nowrap;
width : 200px;
}

Dans cet exemple, nous masquons le texte dans un conteneur div, limitons la largeur du conteneur à 200 pixels et utilisons l'attribut text-overflow pour remplacer le texte hors plage par des points de suspension.

3. Conclusion

L'utilisation de texte au-delà du masquage et des ellipses sont des techniques courantes en CSS, qui jouent un rôle très important dans la conception et la mise en page des pages Web. Cependant, lors de son utilisation, vous devez faire attention aux paramètres de divers attributs et conditions pour obtenir les résultats escomptés. J'espère que cet article vous aidera !

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!