Créer une boîte avec du texte défilant à l'aide de CSS et HTML

Un HTML La boîte de défilement est une boîte qui ajoute des barres de défilement sur le côté droit et en bas lorsque le contenu de la boîte est plus grand que les dimensions de la boîte. En d'autres termes, si vous avez une zone pouvant contenir environ 50 mots et que vous avez un texte de 200 mots, une zone de défilement HTML placera des barres de défilement pour vous permettre de voir les 150 mots supplémentaires. En HTML standard, cela pousserait simplement le texte supplémentaire à l'extérieur de la boîte.

Faire défiler HTML est assez simple. Vous avez juste besoin de définir la largeur et la taille de l'élément que vous souhaitez faire défiler puis utilisez le CSS overflow pour définir la manière dont vous souhaitez que le défilement se produise.

Que faire avec du texte supplémentaire?

Lorsque vous avez plus de texte que ne peut en contenir l'espace de votre mise en page, plusieurs options s'offrent à vous:

• Réécrivez le texte pour qu'il soit plus court et qu'il tienne.
instagram viewer
• Laissez le texte s'écouler au-delà des limites et espérez que la mise en page puisse s'adapter pour le prendre en charge.
• Coupez le texte là où il déborde.
• Ajoutez des barres de défilement (généralement verticales pour le texte) afin que l'espace défile pour afficher le texte supplémentaire.

La meilleure option est généralement la dernière option: créer une zone de texte défilante. Ensuite, le texte supplémentaire peut toujours être lu, mais votre conception n'est pas compromise.

HTML et CSS pour cela seraient:

texte ici... 

le débordement: automatique ; indique au navigateur d'ajouter des barres de défilement si elles sont nécessaires pour empêcher le texte de dépasser les limites du div. Mais pour que cela fonctionne, vous avez également besoin des propriétés de style largeur et hauteur définies sur le div, afin qu'il y ait des limites à dépasser.

Vous pouvez également couper le texte en modifiant le débordement: auto; à débordement caché; Si vous omettez la propriété overflow, le texte débordera des limites du div.

Vous pouvez ajouter des barres de défilement à plus que du texte

Si vous avez une grande image que vous souhaitez afficher dans un espace plus petit, vous pouvez ajouter des barres de défilement autour de la même manière que vous le feriez avec du texte.

Dans cet exemple, l'image 400x509 est à l'intérieur d'un paragraphe 300x300.

Les tableaux peuvent bénéficier des barres de défilement

Les longs tableaux d'informations peuvent devenir très difficiles à lire très rapidement, mais en les mettant dans un div de taille limitée puis en ajoutant la propriété overflow, vous pouvez générer des tables avec beaucoup de données qui ne prennent pas trop de place sur votre page.

Le moyen le plus simple est comme pour les images et le texte, ajoutez simplement un div autour de la table, définissez la largeur et la hauteur de ce div et ajoutez la propriété overflow:

... 

Une chose qui se produit lorsque vous faites cela est qu'une barre de défilement horizontale apparaît généralement parce que le navigateur suppose que le chrome des barres de défilement chevauche le tableau. Il existe de nombreuses façons de résoudre ce problème, en modifiant la largeur de la table et d'autres. Mais notre préféré est de simplement désactiver le défilement horizontal avec la propriété CSS 3 débordement-x

Il suffit d'ajouter débordement-x: caché ; au div, et cela supprimera la barre de défilement horizontale. Assurez-vous de tester cela, car il se peut que du contenu disparaisse.

Firefox prend en charge l'utilisation des balises TBODY pour le débordement

Une fonctionnalité vraiment intéressante du navigateur Firefox est que vous pouvez utiliser la propriété overflow sur les balises de table internes comme tbody et thead ou tfoot. Cela signifie que vous pouvez définir des barres de défilement sur le contenu du tableau et que les cellules d'en-tête restent ancrées au-dessus d'elles. Cela ne fonctionne que dans Firefox, ce qui est dommage, mais c'est une fonctionnalité intéressante si vos lecteurs n'utilisent que Firefox. Accédez à cet exemple dans Firefox pour voir ce que je veux dire.

...NomTéléphoneJennifer502-5366. 

...