Qu’est-ce que la propriété CSS Overflow ? — Site Point

Dans cet article, nous allons donner un aperçu rapide du CSS overflow propriété, quel est son objectif et comment nous pouvons l’utiliser pour nous assurer que nos mises en page fonctionnent bien sur tous les appareils et toutes les tailles d’écran.

Le CSS overflow La propriété est utilisée pour contrôler la visibilité du contenu qui dépasse les limites d’un élément HTML. Un débordement peut se produire lorsqu’un élément a une largeur, une hauteur ou une taille de contenu fixes, et que le contenu à l’intérieur de l’élément est trop volumineux pour tenir dans ces contraintes. Lorsque cela se produit, le contenu supplémentaire s’écoule en dehors des limites de l’élément conteneur, provoquant un défilement horizontal ou vertical ou un chevauchement de contenu.

Le stylet suivant montre un exemple de contenu trop large pour son conteneur. Aucune propriété de débordement n’a encore été définie.

Voir le stylo
CSS Overflow 1 : aucune propriété de débordement définie par SitePoint (@SitePoint)
sur CodePen.

CSS overflow nous permet de contrôler la visibilité et le comportement du contenu de débordement en fournissant quatre valeurs différentes : visible, hidden, scrollet auto.

Comment utiliser la propriété CSS overflow pour contrôler la visibilité du contenu débordant

Par défaut, la propriété de débordement est définie sur visible, ce qui signifie que tout contenu de débordement sera visible, même s’il déborde des limites de l’élément conteneur. Cela peut entraîner des chevauchements, des défilements et d’autres problèmes.

Pour contrôler la visibilité du contenu de débordement, vous pouvez définir la propriété de débordement sur l’une des quatre valeurs possibles, que nous aborderons ensuite.

1. Débordement visible

Le visible valeur est la valeur par défaut du overflow propriété. Lorsqu’il est réglé sur visible, tout contenu dépassant les limites de l’élément contenant sera visible, même s’il dépasse les limites de l’élément. De plus, aucune barre de défilement n’apparaîtra malgré le contenu débordant.

Voici un exemple d’utilisation de visible valeur pour le overflow propriété:

div {
  overflow: visible;
}

Le stylet suivant illustre l’effet du réglage overflow: visible sur l’élément contenant. Rien n’a changé par rapport à l’exemple original.

Voir le stylo
CSS Overflow 2 : débordement visible par SitePoint (@SitePoint)
sur CodePen.

2. Débordement caché

Le hidden La valeur masquera tout contenu de débordement qui s’écoule en dehors des limites de l’élément conteneur. Aucune barre de défilement n’apparaîtra ou ne sera nécessaire pour accéder au contenu masqué. Cela peut être utile lorsqu’un élément a des contraintes de taille spécifiques et que tout contenu qui se développe au-delà de ces limites ne doit pas être visible.

Voici un exemple d’utilisation de hidden valeur de la propriété overflow :

div {
  overflow: hidden;
}

Le stylo suivant montre l’effet de l’application overflow: hidden au conteneur. Le contenu débordant n’est plus visible et n’est pas accessible à l’utilisateur final. Utilisez donc cette option avec prudence !

Voir le stylo
CSS Overflow 3 : débordement masqué par SitePoint (@SitePoint)
sur CodePen.

3. Défilement de débordement

Le scroll valeur ajoutera une barre de défilement à l’élément contenant si le contenu de débordement est présent. Cela peut être utile lorsque vous souhaitez donner aux utilisateurs la possibilité de faire défiler le contenu débordant dans un espace défini.

Voici un exemple d’utilisation de scroll valeur de la propriété overflow :

div {
  overflow: scroll;
}

Le stylo suivant montre ce qui se passe lorsque nous appliquons overflow: scroll à l’élément contenant. Les utilisateurs peuvent désormais faire défiler vers la droite pour afficher le contenu qui déborde du conteneur.

Voir le stylo
CSS Overflow 4 : défilement de débordement par SitePoint (@SitePoint)
sur CodePen.

Dans l’exemple ci-dessus, notez également l’utilisation de overflow-y: hidden;, qui est une option supplémentaire qui masque la barre de défilement vide à droite du conteneur. (Essayez de le retirer dans le stylet pour voir la différence.)

Nous pouvons définir le débordement pour qu’il s’applique uniquement dans une direction en utilisant le overflow-x ou overflow-y propriétés au lieu de simplement overflow, qui applique les règles de débordement dans les deux sens. Dans les exemples présentés dans cet article, le contenu ne déborde que le long de l’axe Y, nous pourrions donc simplement utiliser le overflow-y propriété à la place de overflow.

4. Automatique

Le auto value ajoutera une barre de défilement à l’élément conteneur uniquement si le contenu de débordement est présent. Les barres de défilement apparaîtront lorsque le contenu est trop volumineux pour tenir dans un espace défini. Lorsque le contenu tient dans l’espace défini, les barres de défilement seront masquées et le contenu sera visible.

Voici un exemple d’utilisation de auto valeur de la propriété overflow :

div {
  overflow: auto;
}

Le stylo suivant montre l’effet de l’utilisation overflow: auto sur l’élément contenant. Dans cet exemple simple, l’effet visuel est le même que si vous utilisiez overflow: scroll. Mais aucune barre de défilement n’apparaît sur l’axe y, car il n’y a pas de débordement dans cette direction.

Voir le stylo
CSS Overflow 5 : débordement automatique par SitePoint (@SitePoint)
sur CodePen.

Pourquoi la propriété CSS overflow est-elle importante pour le développement Web ?

Le CSS overflow La propriété est un outil essentiel pour les développeurs Web, nous permettant de contrôler la visibilité et le comportement du contenu de débordement dans un élément HTML. Cette propriété garantit que le contenu s’écoule correctement dans un espace défini, en évitant les problèmes tels que le chevauchement, le défilement ou le contenu qui ne peut pas être vu.

Le overflow La propriété contribue également à créer des conceptions réactives sur différentes tailles d’écran. En contrôlant la visibilité et le comportement du contenu de débordement, vous pouvez vous assurer que le contenu s’affiche comme prévu sur les appareils avec différentes tailles d’écran ou résolutions.

Dans l’ensemble, le CSS overflow La propriété est essentielle pour garantir que le contenu Web s’affiche comme prévu sur un large éventail d’appareils, de navigateurs Web et de tailles d’écran.

Le débordement CSS peut-il être utilisé pour créer des conceptions réactives sur différentes tailles d’écran ?

Oui, le CSS overflow La propriété peut être utilisée pour créer des conceptions réactives sur différentes tailles d’écran. En utilisant le hidden ou scroll valeurs, nous pouvons nous assurer que le contenu reste dans les limites définies, en évitant les chevauchements, le défilement ou le contenu qui ne peut pas être vu.

Nous pouvons également utiliser le auto valeur pour s’assurer que le contenu s’affiche comme prévu sur les appareils avec différentes tailles d’écran ou résolutions. Quand le overflow la propriété est définie sur autoles barres de défilement apparaissent lorsque le contenu est trop volumineux pour tenir dans l’espace défini, garantissant que les utilisateurs peuvent accéder à tout le contenu de l’élément.

Lors du dépannage de problèmes liés au CSS overflow propriété, nous devons tenir compte des facteurs suivants :

1. Assurez-vous que le overflow est défini correctement pour l’élément.

2. Vérifiez que l’élément a la bonne largeur, hauteur ou taille de contenu.

3. Examinez le code CSS pour vous assurer qu’il n’y a pas de styles en conflit qui pourraient affecter le overflow paramètres ou la taille de l’élément.

4. Envisagez d’utiliser des outils de développement de navigateur pour inspecter l’élément et ses propriétés. Cela peut nous aider à identifier des problèmes tels que des chevauchements ou des définitions de taille incorrectes.

En suivant ces étapes et en testant l’élément sur différents appareils, vous pouvez identifier et résoudre les problèmes liés au CSS. overflow.

Conclusion

En conclusion, le CSS overflow La propriété est un outil essentiel qui nous permet de contrôler la visibilité et le comportement du contenu susceptible de dépasser les limites de son conteneur. Cela garantit que le contenu s’intègre correctement dans un espace défini sans problèmes tels que le chevauchement ou le défilement.

En exploitant le overflow propriété, les développeurs Web peuvent créer des conceptions réactives sur différentes tailles et résolutions d’écran, garantissant que leur contenu a fière allure sur n’importe quel appareil ou écran. Enfin, le dépannage des problèmes liés au CSS overflow peut être fait de manière efficace et efficiente en tenant compte de la taille de l’élément, du code CSS et en utilisant les outils de développement du navigateur.