Débordement en HTML5

Une fois que nous avons commencé à modifier les tailles des éléments et de leurs conteneurs, il arrive toujours un moment où les deux ne sont plus compatibles et nous obtenons le terrible effet de débordement ou débordement, qui n'est rien de plus que l'effet qu'un élément est plus gros qu'un autre et tombe de son contenant.
Voyons un exemple classique d'un élément très petit pour son contenu et qui génère un débordement, comme tout est plus facile à voir à travers des exemples, voyons d'abord un avant de voir les propriétés qui nous aident à contrôler le débordement.

 Exemple
Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.

Le code précédent génère le résultat suivant dans le navigateur :

Comme nous pouvons le voir dans le texte sur le passage de la capacité de la boîte du conteneur, pour corriger cela, nous pouvons utiliser la propriété débordement, regardons les propriétés avant de procéder à la correction de ce problème :

débordement-x / débordement-y : Ils déterminent le comportement de débordement horizontal ou vertical.

Débordement: C'est un raccourci pour utiliser la propriété précédente et l'ordre dans lequel cela fonctionne est débordement, débordement x, débordement y.

Les propriétés qui peuvent être utilisées avec l'élément débordement sont les suivants:

auto: Cette valeur délègue au navigateur la responsabilité de décider quoi faire, généralement ce qui se passe est qu'une barre de défilement s'affiche lorsque l'élément commence à déborder le contenant.

caché: Le contenu est affiché jusqu'à la partie qui ne déborde pas, cachant le reste du contenu, il n'a pas de mécanismes pour dire à l'utilisateur quoi faire pour voir le reste du contenu.

Pas de contenu: Le contenu débordé est supprimé s'il ne peut pas être logé dans le conteneur. Cette valeur n'est prise en charge par aucun des navigateurs les plus populaires

pas d'affichage : Le contenu est masqué s'il ne peut pas être entièrement affiché. Cette valeur n'est prise en charge par aucun des navigateurs les plus populaires.

faire défiler: Le navigateur génère une barre de défilement permettant à l'utilisateur de toujours voir le contenu débordé à l'intérieur du conteneur. La barre dépendra du navigateur et du système pour définir la façon dont elle est affichée. La barre de défilement sera toujours visible même si l'élément ne déborde pas.

visible: Ceci est la valeur par défault. Le contenu est toujours affiché même s'il déborde.

Maintenant que nous avons les outils pour attaquer un débordement, voyons en pratique comment nous pouvons l'appliquer, rien de mieux qu'un petit code pour le démontrer :

 Exemple
Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.
Il existe de nombreuses sortes de fruits - il existe plus de 500 variétés de bananes à elles seules. Au moment où nous ajoutons les innombrables types de pommes, d'oranges et d'autres fruits bien connus, nous sommes confrontés à des milliers de choix.

Nous avons utilisé deux éléments pour montrer comment le débordement, dans le premier nous plaçons la propriété caché où l'on sait que seul le contenu sera affiché jusqu'au début du débordement, puis le reste est masqué et pour la seconde on utilise le scroll, avec lequel une barre de défilement sera affichée que l'élément déborde ou non, voyons le résultat :

Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif