Comment masquer le contenu qui dépasse la bordure DIV

Lorsque nous mettons habituellement en page, le contenu dépasse parfois la largeur et la hauteur de notre bordure DIV, ce qui entraînera un mauvais alignement et un désordre de la page Web, ce qui est particulièrement inesthétique et l'expérience utilisateur est extrêmement mauvaise. Comment masquer le. bordure DIV débordante ? Qu'en est-il du contenu ? Aujourd'hui, je vous propose ce tutoriel.

Comment masquer automatiquement le contenu qui dépasse la largeur et la hauteur de la bordure DIV à l'aide des styles CSS

Habituellement, lors de la mise en page, certains contenus textuels dépassent la hauteur qui dépasse notre limite, et d'autres L'image fera éclater la DIV et provoquera un désalignement de la page Web.

De cette façon, 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.

1. Résolvez le style CSS

À ce stade, nous pouvons utiliser la solution de style CSS overflow :

Le style overflow:hidden

Div{overflow:hidden}

Après ce paramètre, 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 du DIV.

Lecture connexe : CSS implémente le débordement et affiche des ellipses au-delà du contenu du texte

2 Cas de masquage du contenu excédentaire

Masquer le contenu du texte qui dépasse la largeur et la hauteur de. l'objet

Si nous alignons magnifiquement 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 nous assurer que peu importe la quantité de contenu et de contenu. il y a du texte, la mise en page ne dépassera pas la largeur et la hauteur définies. À ce stade, nous avons besoin de overflow:hidden pour vous aider.

Code CSS :

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

<p class="pcss5">欢迎，
</p>

Définir overflow:hidden de cette manière masquera le contenu qui ne peut pas tenir dans l'objet, quelle que soit la quantité de contenu définie en dehors de la largeur et de la hauteur. .

2. Cas de masquage d'une partie de l'image qui dépasse la largeur de l'objet

Ici, définissez une boîte 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> 
.pcss5{ width:300px; height:50px; line-height:25px; overflow:hidden} 
/* 设置对象高度宽度，同时设置overflow:hidden */ 
</style>

Code HTML

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

Définir la largeur et la hauteur, bien que l'image soit grande

Pour résumer, si vous souhaitez que le contenu ne dépasse pas les limites de largeur et de hauteur fixées par l'objet, il vous suffit d'utiliser overflow:hidden pour masquer les parties en excès.

Lecture connexe :

Comment définir les barres de défilement pour DIV

Comment utiliser CSS pour centrer DIV

Introduction à la définition des propriétés et des styles de la barre de défilement DIV

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!