Comment afficher des points de suspension lors du débordement de texte sur une seule ligne et de texte sur plusieurs lignes

Lors de la mise en page, il arrive souvent que le contenu du texte dépasse la case. Si veut réaliser le débordement d'une seule ligne de texte pour afficher les points de suspension , tout le monde devrait le savoir. que utilise l'attribut text-overflow: ellipsis , bien sûr, l'attribut width doit également être ajouté pour être compatible avec une certaine navigation. Ensuite, jetons un coup d'œil.

Méthode de mise en œuvre :

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

L'effet est comme indiqué :

Mais cet attribut ne prend en charge que Le débordement d'une seule ligne de texte affiche les points de suspension Et si on veut implémenter le débordement de texte multiligne avec les points de suspension . Ensuite, nous nous concentrerons sur la façon d'afficher des points de suspension 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 de mise en œuvre :

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

L'effet est tel qu'illustré :

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!