Masquage de débordement : la solution la plus complète au problème de débordement de contenu à l'aide de CSS

Dans la mise en page p, certains contenus de texte dépasseront la hauteur qui dépasse notre limite, et certaines images feront éclater le DIV, rendant la page Web mal alignée et déroutante. Que dois-je faire si le contenu déborde du conteneur et dépasse la largeur et la hauteur limitées par le conteneur ? Vous pouvez masquer la partie de débordement du texte ou utiliser des points de suspension pour remplacer . Comment y parvenir ? Cet article vous explique comment utiliser les sauts de ligne, les ellipses, etc. pour résoudre ces problèmes de débordement.

1. Utilisez des sauts de ligne pour résoudre le problème de débordement

1 Comment utiliser le retour à la ligne pour résoudre le débordement de texte. problème

word-break:break-all et word-wrap:break-word sont souvent utilisés pour résoudre le problème du retour à la ligne dans les longues chaînes. word-break:break-all est le même dans IE6/7/chrome/safari, qui se comporte comme une troncature de queue, tandis que ff3.0/opera se comporte comme invalide. Les mots trop longs sont affichés sur de nouvelles lignes et dépassent ensuite les limites. word-wrap:break-word; est le même dans IE6/7/chrome/safari. Il se comporte comme si les mots longs étaient divisés en nouvelles lignes et seraient rognés lorsqu'ils ne pourraient plus être affichés. Et ff3.0/opera semble également être invalide.

2. Comment gérer le débordement CSS et les sauts de ligne

Lorsque le texte est trop long et ne peut pas être affiché dans le conteneur, faites vous voulez l'envelopper ? Utilisez l'attribut white-space : normal / nowrap , normal : adopter les paramètres par défaut du navigateur nowrap : ne pas envelopper.

Comment gérer le débordement. Si vous souhaitez masquer le contenu du débordement, vous pouvez envisager d'utiliser l'attribut text-overflow.

3. Le flash du navigateur Firefox/IE est transparent, le CSS est forcé de ne pas s'enrouler, le débordement est masqué

le CSS est forcé ne pas envelopper, déborder Caché : overflow:hidden

Instructions et points :

◎ Récupérer ou définir comment gérer le contenu lorsque le contenu de l'objet dépasse la hauteur spécifiée et la largeur.
◎ Définir l'objet textarea sur la valeur cachée masquera ses barres de défilement.
◎ Pour table, si l'attribut table-layout est défini surfixe, l'objet td prend en charge l'attribut overflow avec la valeur par défaut masquée. S'il est défini sur caché, défilement ou automatique, le contenu dépassant la taille td sera coupé. S'il est défini sur visible, le texte supplémentaire débordera vers les cellules à droite ou à gauche de ◎ (en fonction du paramètre de propriété de direction).
◎ À partir d'IE5, cette propriété est disponible sur la plateforme MAC. La fonctionnalité de script correspondante est le débordement.

2. Utilisez les points de suspension pour résoudre le problème de débordement

1. html La méthode d'utilisation des points de suspension pour contrôler l'affichage du texte dépassant le nombre de caractères

Généralement, si le texte dans un conteneur utilisant p+css dépasse la longueur, il flottera en dehors de la boîte ou agrandira la boîte . Parfois, vous devez prendre en compte les problèmes de compatibilité des navigateurs. L'application des normes CSS est également différente. Étant donné que Firefox est un navigateur standard reconnu [bien sûr, Opera aussi] et qu'il détient une part de marché plus élevée, Firefox peut être utilisé pour la certification.

2.

CSS, les points de suspension d'affichage de débordement de texte sur une seule ligne et sur plusieurs lignes

Dans le projet, en raison d'une trop grande description réelle texte, la longueur verticale de la page est trop longue, ce qui réduit également l'utilisation des informations restantes ; par conséquent, lorsqu'il y a trop de texte, il est nécessaire d'initialiser le nombre de lignes CSS monolignes et multi-lignes. le texte de la ligne déborde et affiche des ellipses.

3.

Un résumé de la méthode d'affichage des ellipses lors du débordement de texte sur une seule ligne et sur plusieurs lignes

Dans la mise en page frontale, la mise en page est souvent affectée par trop de texte. Surtout sur les pages mobiles, si la largeur de l'écran n'est pas suffisante, le texte du paragraphe perturbera la mise en page s'il est entièrement affiché. Par conséquent, ce serait parfait si le texte du paragraphe pouvait être affiché en fonction de la taille libre de l'écran. Autrement dit, si l'écran est suffisamment grand, le texte du paragraphe sera entièrement affiché. Si l'écran est petit, le texte du paragraphe sera affiché. être partiellement affiché sous forme d’ellipses.

4. La méthode de disposition par débordement de contenu dans le tableau

Nous savons que lorsque nous saisissons trop de contenu de texte dans le tableau, cela encombrera le tableau, par exemple une ligne. sera trop long ou le retour à la ligne sera automatique. Mais parfois on souhaite l'afficher dans une ligne avec une largeur fixe. Si la partie supplémentaire est remplacée par des points, cela n'encombrera pas le tableau.

5. Utilisez CSS pour résoudre le problème du remplacement des points de suspension lorsque le nombre de caractères dans le titre dépasse la limite

Étape 1 : Masquer le contenu en excès lorsque le contenu dépasse la largeur

Étape 2 : Afficher la marque d'omission (...) lorsque le texte dans l'objet déborde

Questions et réponses sur le débordement et le masquage du contenu CSS

1. html - Comment utiliser javascript pour déterminer si p a débordé ?

2. css3 - Lorsque la liste déborde horizontalement, des points de suspension s'affichent (les points de suspension sont une image)

3. la hauteur de l'élément interne après débordement est masquée ?

【Recommandations associées】

1.

php.cn Dugu Jiujian (2) - tutoriel vidéo CSS

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!