Comment implémenter un débordement de texte sur une seule ligne et plusieurs lignes et afficher des points de suspension en CSS

Lors de la mise en page de la page, nous rencontrons souvent la situation où le contenu dépasse la boîte. À ce stade, nous pouvons définir la partie de débordement pour qu'elle soit masquée, et nous pouvons également définir la partie de débordement pour qu'elle soit tronquée, mais en général. , la partie débordement est utilisée pour afficher les ellipses. Cet article vous expliquera comment utiliser CSS pour réaliser l'affichage de débordement d'ellipses dans un texte sur une seule ligne et dans un texte multiligne. Les amis dans le besoin pourront y jeter un œil.

Si vous souhaitez réaliser l'affichage par débordement des points de suspension sur une seule ligne de texte, vous devez tous savoir utiliser l'attribut text-overflow:ellipsis. Bien sûr, vous devez également ajouter l'attribut width pour être. compatible avec une certaine navigation.

Méthode d'implémentation :

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

L'effet est le suivant :

Mais cet attribut ne prend en charge que l'affichage de débordement des ellipses pour texte sur une seule ligne. Si nous voulons implémenter un débordement de texte sur plusieurs lignes et afficher des ellipses.

Ensuite, concentrons-nous sur l'affichage des ellipses lorsque du texte multiligne déborde, comme suit.

Méthode de mise en œuvre :

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

L'effet est tel qu'illustré :

Portée applicable :

En raison de l'utilisation des attributs étendus WebKit CSS, cette méthode convient aux navigateurs WebKit et aux terminaux mobiles

Remarque :

1 -webkit-line-clamp est utilisé pour limiter la ligne de texte affichée ; dans un numéro d'élément de bloc. Pour obtenir cet effet, il doit être combiné avec d'autres propriétés WebKit. Attributs de combinaison courants :
2. display : -webkit-box ; Attributs qui doivent être combinés pour afficher l'objet sous forme de modèle de boîte flexible.
3. -webkit-box-orient doit être combiné avec l'attribut pour définir ou récupérer la disposition des sous-éléments de l'objet flex box.

Méthode d'implémentation :

p{position : relative; line-height : 20px; max-height : 40px;overflow : caché;}
p::after{content: ". .."; position : absolue ; bas : 0 ; droite : 0 ; padding-left : 40px;
arrière-plan : -webkit-linear-gradient(gauche, transparent, #fff 55%);
arrière-plan : - o-linear-gradient(droite, transparent, #fff 55%);
arrière-plan : -moz-linear-gradient(droite, transparent, #fff 55%);
arrière-plan : linéaire-gradient(à droite, transparent, #fff 55 %);
}

L'effet est comme indiqué :

Portée applicable :

Le champ d'application applicable la portée de cette méthode est large, mais des ellipses apparaîtront même si le texte ne dépasse pas la ligne. Cette méthode peut être optimisée avec js.

Remarque :

1. Définissez la hauteur sur un multiple entier de la hauteur de la ligne pour éviter que le texte en excès ne soit exposé.
2. Ajoutez un arrière-plan dégradé à p::after pour empêcher que seulement la moitié du texte soit affichée.
3. Étant donné que ie6-7 n'affiche pas le contenu, vous devez ajouter des balises pour être compatible avec ie6-7 (telles que : ...) ; ie8, vous devez remplacer ::after par :after.

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!