Méthode d'implémentation CSS pour réaliser un débordement de texte sur une seule ligne et plusieurs lignes et afficher des ellipses

Si vous souhaitez réaliser l'affichage par débordement des ellipses dans 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 partial. navigation

1. Débordement d'une seule ligne

1, une seule ligne déborde, la partie excédentaire est affichée...ou interceptée. Le local doit avoir de la largeur.
CSS : {width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}, intercepté en tant que clip ;

Code d'implémentation :

width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-space: nowrap;

L'effet est comme indiqué sur la figure :


Mais cet attribut ne prend en charge l'affichage par débordement des points de suspension que pour une seule ligne de texte. Si nous voulons implémenter l'affichage par débordement des ellipses pour le texte multiligne, Tissu en laine.

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

2. Débordement multiligne

{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2 ; -webkit-box-orient:vertical;}

Méthode de mise en œuvre :

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

Effet Comme le montre l'image :


Champ d'application :

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

Remarque :

1.-webkit-line-clamp est utilisé pour limiter le nombre de lignes de texte affichées dans un élément de bloc. Pour obtenir cet effet, il doit être combiné avec d'autres propriétés WebKit. Attributs couramment combinés :
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 éléments enfants 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; bottombottom: 0; rightright: 0; padding-left: 40px;    
background: -webkit-linear-gradient(left, transparent, #fff 55%);    
background: -o-linear-gradient(rightright, transparent, #fff 55%);    
background: -moz-linear-gradient(rightright, transparent, #fff 55%);    
background: linear-gradient(to rightright, transparent, #fff 55%);    
}

Champ d'application :
Cette méthode a un large éventail d'applications, mais des ellipses apparaîtront également lorsque 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.

Éditeur Script House ajouté :

Le navigateur principal d'IE doit définir la hauteur et la hauteur de la ligne, -webkit-line-clamp signifie quelques lignes, par exemple

hauteur de ligne : 20px;

hauteur maximale : 40px;

affichage : -webkit-box;

-webkit- box-orient : vertical;

-webkit-line-clamp: 2;

débordement: caché;

-webkit-line-clamp

-webkit-line-clamp est une propriété WebKit non prise en charge qui n'apparaît pas dans le brouillon de spécification CSS.
Limiter le nombre de lignes de texte affichées dans un élément de bloc. Afin d'obtenir cet effet, il doit être combiné avec d'autres propriétés WebKit étrangères. Propriétés couramment combinées :
display : -webkit-box ; doit être combiné pour afficher l'objet sous la forme d'un modèle de boîte flexible.
-webkit-box-orient doit être combiné avec l'attribut pour définir ou récupérer la disposition des éléments enfants de l'objet flex box.
text-overflow peut être utilisé pour masquer le texte hors plage avec des points de suspension "..." lors de l'utilisation de texte multiligne.

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!