Maison interface Web Questions et réponses frontales Comment implémenter le masquage de débordement en CSS

Comment implémenter le masquage de débordement en CSS

Apr 08, 2021 am 09:59 AM
css

Comment implémenter le masquage de débordement avec CSS : 1. Ajoutez le style "overflow: Hidden;" à l'élément et configurez-le pour couper et masquer la partie de débordement lorsque le contenu déborde de la zone de l'élément ; text-overflow" au style de l'élément :ellipsis;", le contenu coupé (contenu caché) peut être représenté par le symbole des points de suspension "...".

Comment implémenter le masquage de débordement en CSS

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

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;
Copier après la connexion

L'effet est le suivant :
Comment implémenter le masquage de débordement en CSS

Mais cet attribut ne prend en charge que l'affichage par débordement des points de suspension pour le texte sur une seule ligne, si nous voulons implémenter plusieurs lignes, le texte déborde et affiche des ellipses.

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

Méthode d'implémentation :

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;
Copier après la connexion

L'effet est le suivant :
Comment implémenter le masquage de débordement en CSS

Portée applicable :
En raison de l'utilisation des attributs étendus CSS de WebKit, cette méthode est applicable dans les navigateurs WebKit et les terminaux mobiles ;

Remarque :

  • -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 :

  • display: -webkit-box ; Attributs qui doivent être combinés pour afficher l'objet sous forme de 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.

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%);}
Copier après la connexion

L'effet est le suivant :
Comment implémenter le masquage de débordement en CSS

Portée applicable :
Cette méthode a un large gamme d'applications. Cependant, des ellipses apparaîtront également lorsque le texte ne dépasse pas la ligne. Cette méthode peut être optimisée avec js. [Apprentissage recommandé : Tutoriel vidéo CSS]

Remarque :

  • Définissez la hauteur sur un multiple entier de la hauteur de la ligne pour éviter que du texte en excès ne soit exposé .

  • Ajoutez un arrière-plan dégradé à p::after pour éviter que seulement la moitié du texte soit affichée.

  • Puisque ie6-7 n'affiche pas le contenu, vous devez ajouter des balises pour être compatible avec ie6-7 (telles que : ) ; pour être compatible avec ie8, vous devez ajouter : :after est remplacé 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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Musée de deux points: Guide de localisation de Bungle Wasteland
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Musée de deux points: Guide de localisation de Bungle Wasteland
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Que signifie l'espace réservé en vue Que signifie l'espace réservé en vue May 07, 2024 am 09:57 AM

Que signifie l'espace réservé en vue

Comment écrire des espaces dans vue Comment écrire des espaces dans vue Apr 30, 2024 am 05:42 AM

Comment écrire des espaces dans vue

Que signifie span en js Que signifie span en js May 06, 2024 am 11:42 AM

Que signifie span en js

Comment avoir dom en vue Comment avoir dom en vue Apr 30, 2024 am 05:36 AM

Comment avoir dom en vue

Que signifie rem en js Que signifie rem en js May 06, 2024 am 11:30 AM

Que signifie rem en js

Comment introduire des images dans vue Comment introduire des images dans vue May 02, 2024 pm 10:48 PM

Comment introduire des images dans vue

Quelle est la fonction de la balise span Quelle est la fonction de la balise span Apr 30, 2024 pm 01:54 PM

Quelle est la fonction de la balise span

Dans quelle langue le plug-in du navigateur est-il écrit ? Dans quelle langue le plug-in du navigateur est-il écrit ? May 08, 2024 pm 09:36 PM

Dans quelle langue le plug-in du navigateur est-il écrit ?

See all articles