HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Tutoriel CSS

CSS ACCUEIL Présentation CSS Syntaxe CSS Sélecteurs CSS CSS Comment faire Commentaires CSS Couleurs CSS
Couleurs RVB HEX LGV
Arrière-plans CSS
Couleur de l'arrière plan Image de fond Répétition du fond Pièce jointe d'arrière-plan Raccourci d'arrière-plan
Bordures CSS
Les frontières Largeur de la bordure Couleur de la bordure Côtés de bordure Raccourci de bordure Bordures arrondies
Marges CSS
Marges Margin Collapse
Rembourrage CSS CSS Hauteur/Largeur Modèle de boîte CSS Aperçu CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Texte CSS
Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow
Polices CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Icônes CSS Liens CSS Listes CSS CSS Tables
Table Borders Table Size Table Alignment Table Style Table Responsive
Affichage CSS CSS Max-width Poste CSS Index Z CSS Débordement CSS Flottant CSS
Float Clear Float Examples
Bloc en ligne CSS Alignement CSS Combinateurs CSS Pseudo-classe CSS Pseudo-élément CSS Opacité CSS Barre de navigation CSS
Navbar Vertical Navbar Horizontal Navbar
Listes déroulantes CSS Galerie d'images CSS Sprites d'image CSS Sélecteurs d'attributs CSS Formulaires CSS Compteurs CSS Mise en page du site Web CSS Unités CSS Spécificité CSS CSS !important Fonctions mathématiques CSS

CSS avancé

Coins arrondis CSS Images de bordure CSS Arrière-plans CSS Couleurs CSS Mots-clés de couleur CSS Dégradés CSS
Linear Gradients Radial Gradients Conic Gradients
Ombres CSS
Shadow Effects Box Shadow
Effets de texte CSS Polices Web CSS Transformations CSS 2D Transformations 3D CSS Transitions CSS Animation CSS Info-bulles CSS CSS Style Images Réflexion d'image CSS Ajustement d'objet CSS Position d'objet CSS Masquage CSS Boutons CSS Pagination CSS CSS plusieurs colonnes Interface utilisateur CSS Variables CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Dimensionnement des boîtes CSS Requêtes média CSS Exemples CSS MQ Boîte flexible CSS
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS réactif

RWD Introduction Fenêtre RWD Affichage de la grille RWD Requêtes multimédia RWD Images RWD Vidéos RWD Cadres RWD Modèles RWD

Grille CSS

Grille d'introduction Conteneur de grille Élément de grille

CSS SASS

Tutoriel SASS

Exemples CSS

Modèles CSS Exemples CSS CSS Quiz Exercices CSS Certificat CSS

Références CSS

Référence CSS Sélecteurs CSS Fonctions CSS Audit de référence CSS Polices sécurisées pour le Web CSS CSS animable Unités CSS Convertisseur CSS PX-EM Couleurs CSS Valeurs de couleur CSS Valeurs CSS par défaut Prise en charge du navigateur CSS

Mise en page CSS - Débordement

❮ Précédent Suivant ❯

La propriété CSS overflowcontrôle ce qu'il advient du contenu trop volumineux pour tenir dans une zone.

Ce texte est très long et la hauteur de son conteneur n'est que de 100 pixels. Par conséquent, une barre de défilement est ajoutée pour aider le lecteur à faire défiler le contenu. La douleur elle-même est l'amour C'est pourquoi c'est pour le moindre à venir, que notre pratique normale supporte pour profiter des conséquences La douleur de la douleur au bureau des Jeux olympiques, ou la douleur du bureau aux Jeux olympiques, il veut être une gêne pour les conséquences, ou il souffre de la douleur du système immunitaire de l'UE à la vérité, l'eros et le consommateur, et la haine régulière du zzril. Pour un temps libre quand on est libéré de nos ados c'est pas le choix Les types n'ont pas de clarté inhérente

Débordement CSS

La overflowpropriété spécifie s'il faut découper le contenu ou ajouter des barres de défilement lorsque le contenu d'un élément est trop grand pour tenir dans la zone spécifiée.

La overflowpropriété a les valeurs suivantes :

  • visible- Défaut. Le débordement n'est pas écrêté. Le contenu s'affiche en dehors de la boîte de l'élément
  • hidden - Le débordement est tronqué, et le reste du contenu sera invisible
  • scroll - Le débordement est écrêté, et une barre de défilement est ajoutée pour voir le reste du contenu
  • auto- Semblable à scroll, mais il ajoute des barres de défilement uniquement lorsque cela est nécessaire

Remarque : La overflowpropriété ne fonctionne que pour les éléments de bloc avec une hauteur spécifiée.

Remarque : sous OS X Lion (sur Mac), les barres de défilement sont masquées par défaut et ne s'affichent que lorsqu'elles sont utilisées (même si "overflow:scroll" est défini).

débordement : visible

Par défaut, le débordement est visible, ce qui signifie qu'il n'est pas écrêté et qu'il s'affiche en dehors de la boîte de l'élément :

Vous pouvez utiliser la propriété overflow lorsque vous souhaitez avoir un meilleur contrôle de la mise en page. La propriété overflow spécifie ce qui se passe si le contenu déborde de la boîte d'un élément.

Exemple

div {
  width: 200px;
  height: 50px;
  background-color: #eee;
  overflow: visible;
}

débordement caché

Avec la hiddenvaleur, le débordement est coupé et le reste du contenu est masqué :

Exemple

div {
  overflow: hidden;
}

débordement : défilement

En définissant la valeur sur scroll, le débordement est coupé et une barre de défilement est ajoutée pour faire défiler à l'intérieur de la boîte. Notez que cela ajoutera une barre de défilement à la fois horizontalement et verticalement (même si vous n'en avez pas besoin):

Vous pouvez utiliser la propriété overflow lorsque vous souhaitez avoir un meilleur contrôle de la mise en page. La propriété overflow spécifie ce qui se passe si le contenu déborde de la boîte d'un élément.

Exemple

div {
  overflow: scroll;
}

débordement : automatique

La autovaleur est similaire à scroll, mais elle ajoute des barres de défilement uniquement lorsque cela est nécessaire :

Vous pouvez utiliser la propriété overflow lorsque vous souhaitez avoir un meilleur contrôle de la mise en page. La propriété overflow spécifie ce qui se passe si le contenu déborde de la boîte d'un élément.

Exemple

div {
  overflow: auto;
}

débordement-x et débordement-y

Les propriétés overflow-xet overflow-yspécifient s'il faut modifier le débordement de contenu uniquement horizontalement ou verticalement (ou les deux) :

overflow-xspécifie quoi faire avec les bords gauche/droit du contenu.
overflow-yspécifie ce qu'il faut faire avec les bords supérieur/inférieur du contenu.

Vous pouvez utiliser la propriété overflow lorsque vous souhaitez avoir un meilleur contrôle de la mise en page. La propriété overflow spécifie ce qui se passe si le contenu déborde de la boîte d'un élément.

Exemple

div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

Testez-vous avec des exercices

Exercer:

Forcez une barre de défilement vers l'élément <div> avec class="intro".

<style>
.intro {
  width: 200px;
  height: 70px;
  : ;
}
</style>

<body>

<div class="intro">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Phasellus imperdiet, nulla et dictum interdum,
nisi lorem egestas odio,
vitae scelerisque enim ligula venenatis dolor.
</div>

</body>

Toutes les propriétés de débordement CSS

Property Description
overflow Specifies what happens if content overflows an element's box
overflow-wrap Specifies whether or not the browser can break lines with long words, if they overflow its container
overflow-x Specifies what to do with the left/right edges of the content if it overflows the element's content area
overflow-y Specifies what to do with the top/bottom edges of the content if it overflows the element's content area


❮ Précédent Suivant ❯