Comment masquer le contenu qui déborde d'un DIV

Habituellement, lorsque nous mettons en page la page Web, il y a toujours un problème avec trop de contenu de texte, qui dépasse la hauteur qui dépasse notre limite. Ensuite, il y aura des images qui briseront le DIV et provoqueront. la page Web est mal alignée et encombrée. Alors, comment résoudre ce problème ?

Nous devons résoudre comment utiliser CSS pour masquer automatiquement le contenu qui dépasse la largeur CSS et la hauteur CSS définies sans casser la mise en page DIV.

Surtout dans IE6, si le contenu dépasse la hauteur et la largeur de l' objet , il éclatera et augmentera en hauteur. À ce stade, nous pouvons utiliser les solutions suivantes.

Résolution des styles CSS

À ce stade, nous pouvons utiliser le style CSS overflow pour résoudre :

débordement de style correspondant : caché

Div{ overflow:hidden}

Après un réglage comme celui-ci, si l'objet DIV est défini sur une certaine largeur et hauteur, l'ajout de overflow:hidden à ce moment masquera le contenu, y compris les images qui dépassent la largeur et la hauteur de la DIV.

Lecture connexe : implémentation CSS du débordement dépassant le contenu du texte et affichant des points de suspension

Masquer au-delà de la casse du contenu

Masquer le contenu du texte au-delà de la largeur et de la hauteur de l'objet

Si nous souhaitons aligner joliment l'objet dans une mise en page, nous devons parfois définir la hauteur et la largeur de l'objet, puis le corriger. À ce stade, nous devons réaliser que quelle que soit la quantité de contenu et de texte, la mise en page ne doit pas dépasser la largeur et la hauteur définies. À ce stade, nous avons besoin de l'aide de overflow:hidden.

Code CSS :

<style> 
.div{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度，同时设置overflow:hidden */ 
</style>

Code HTML :

<div class="div">欢迎，

Ici, vous pouvez apprendre le CSS et télécharger les ressources dont vous avez besoin,

Au en même temps, vous pouvez trouver votre propre

FAQRéponses16b28748ea4df4d9c2150843fecfba68

Solution pour casser le contenu

De cette façon, overflow: Hidden masquera l'objet peu importe la quantité de contenu. Définissez la largeur et le contenu qui sont trop élevés pour sortir de la boîte.

Ici, définissez une zone d'objet avec une certaine largeur CSS et hauteur CSS, placez une grande image, puis utilisez overflow:hidden pour masquer la partie excédentaire.

Code CSS

<style> 
.div{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度，同时设置overflow:hidden */ 
</style>

Code HTML

<div class="div"> 
<img src="http://www.php.cn" /> 
</div>

Donc, si vous souhaitez que le contenu ne dépasse pas la limite de largeur et de hauteur fixée par l'objet, utilisez le débordement :hidden pour cacher l'excédent. Juste l'excédent.

Il existe de nombreuses astuces pour masquer les débordements. Pour un contenu plus excitant, veuillez faire attention au site Web chinois php

Autres articles liés !

Lecture connexe :

Comment utiliser DIV en HTML

Comment utiliser la balise HTML5 c787b9a589a3ece771e842a6176cf8e9 > Comment rédiger une déclaration de type de document HTML

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!