Overflow est une propriété CSS qui contrôle ce qu’il advient du contenu qui dépasse les limites d’un conteneur. Elle s’avère très utile lors de la conception de pages web nécessitant le défilement ou le masquage d’un contenu qui ne tient pas dans un conteneur. Dans cet article, nous verrons comment utiliser la propriété overflow et répondrons à quelques questions connexes.
Pour afficher les barres de défilement uniquement lorsque le contenu déborde, utilisez la propriété overflow avec la valeur auto. Cette valeur ajoutera des barres de défilement au conteneur uniquement lorsque cela est nécessaire. Par exemple :
« `
.container {
overflow : auto ;
}
« `
Comment masquer le texte qui déborde sans ajouter de barres de défilement ?
Si vous souhaitez masquer le texte qui déborde d’un conteneur sans ajouter de barres de défilement, utilisez la propriété overflow avec la valeur hidden. Le contenu débordant sera ainsi masqué sans qu’aucune barre de défilement ne soit ajoutée au conteneur. Par exemple :
« `
.container {
overflow : hidden ;
}
« `
Comment faire défiler un texte en CSS ?
Pour ajouter un défilement à un conteneur en CSS, utilisez la propriété overflow avec la valeur auto ou scroll. La valeur auto ajoutera des barres de défilement uniquement lorsque cela est nécessaire, tandis que la valeur scroll ajoutera des barres de défilement au conteneur, que le contenu déborde ou non. Par exemple :
« `
.container {
overflow : auto ; /* or overflow : scroll ; */
}
« `
Comment cacher une barre de défilement sans empêcher le défilement ?
Si vous souhaitez masquer la barre de défilement sans empêcher le défilement, vous pouvez utiliser le pseudo-élément CSS ::-webkit-scrollbar. Cet élément vous permet de styliser la barre de défilement et de la masquer si nécessaire. En voici un exemple :
« `
.container::-webkit-scrollbar {
display : none ;
}
« `
Comment sauter une ligne en CSS ?
« `
p {
white-space : pre ;
}
p::before {
content : « Première ligne a Deuxième ligne » ;
}
« `
Ceci ajoutera un saut de ligne entre « First Line » et « Second Line », ce qui donnera deux lignes de texte. La propriété white-space avec la valeur pre est utilisée pour préserver le saut de ligne.
Pour faire défiler du texte en HTML, vous pouvez utiliser la propriété CSS `overflow`. Cette propriété indique s’il faut couper le contenu ou ajouter des barres de défilement lorsque le contenu d’un élément déborde de la zone de contenu de l’élément. Vous pouvez définir `overflow : auto;` pour ajouter des barres de défilement uniquement lorsque cela est nécessaire, ou `overflow : scroll;` pour ajouter des barres de défilement toujours visibles. Vous pouvez également définir `overflow : hidden;` pour couper le contenu qui déborde de l’élément.
La propriété CSS qui permet de modifier la marge intérieure droite d’un élément est `padding-right`. Elle peut être utilisée en conjonction avec la propriété `overflow` pour créer un contenu défilant dans un élément.