Selon le concept du modèle de boîte CSS, chaque élément de la page est une boîte rectangulaire. La taille, la position et le comportement de ces boîtes peuvent tous être contrôlés à l'aide de CSS. Par comportement, j'entends la façon dont il gère lorsque le contenu à l'intérieur et à l'extérieur de la boîte change. Par exemple, si vous ne définissez pas la hauteur d'une boîte, la hauteur de la boîte augmentera selon les besoins pour s'adapter à son contenu. Mais que se passe-t-il lorsque vous spécifiez une hauteur ou une largeur pour une boîte et que le contenu à l'intérieur la dépasse ? C'est le moment d'ajouter la propriété CSS overflow, qui permet de spécifier comment gérer cette situation.
La propriété overflow a quatre valeurs : visible (par défaut), masqué, scroll et auto . Il existe également deux propriétés sœurs de overflow, overflow-y et overflow-x, qui sont rarement utilisées.
Examinons chacune de ces valeurs et discutons de l'utilisation et des techniques courantes.
Visible
Si vous ne définissez pas l'attribut de débordement, la valeur par défaut de l'attribut de débordement est visible. Donc, en général, il n'y a aucune raison de définir spécifiquement la propriété overflow sur visible, sauf si vous souhaitez remplacer la valeur à laquelle elle est définie ailleurs.
La chose importante à retenir ici est que même si le contenu en dehors de la boîte est visible, il n’affecte pas le flux de travail de la page. Par exemple:
D'une manière générale, vous n'avez au moins pas besoin de définir une hauteur fixe pour les zones dont le contenu est du texte, vous ne rencontrerez donc pas cette situation.
Caché
La valeur opposée à la valeur par défaut visible est masquée. Cela cachera tout ce qui sort des sentiers battus.
Ceci est vraiment utile pour gérer du contenu dynamique qui peut entraîner des problèmes de mise en page en raison d'un débordement de contenu. Cependant, n'oubliez pas que le contenu masqué à l'aide de cette méthode ne sera pas visible du tout (sauf si vous regardez le code source). Par exemple, certains utilisateurs définissent la police par défaut de leur navigateur pour qu'elle soit plus grande que prévu. Vous pousserez du texte en dehors de la zone et le masquerez complètement...