Comment faire entrer de longs textes dans des petites boîtes avec CSS3 ?

2013-01-23

2022-06-13

Voici un texte de type “Lorem ipsum”, un faux texte utilisé en imprimerie depuis des siècles pour combler dess page et dont l’origine remonterait à l’antiquité. voir : Lorem ipsum

_"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nunc nisi, posuere sed lobortis vitae, accumsan id lectus. Nulla facilisi. Aenean a vestibulum turpis. Cras vel metus nec elit gravida adipiscing. Quisque feugiat tempus justo ut dapibus. Curabitur lobortis, dui nec aliquam feugiat, erat erat cursus tellus, lobortis posuere lacus diam cursus quam. Nulla ultrices facilisis sem, sit amet eleifend quam condimentum pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed dictum arcu sagittis turpis tempus tempor. Pellentesque eu vulputate augue. Vestibulum ut nulla eu mi ornare euismod quis at risus...."

Comment faire entrer ce texte dans une petite portion d’écran ?

Pour illustrer le problème traçons un cadre 300x200 avec du Lorem ipsum à l’intérieur.
Le code utilisé est le suivant :

1 2	<div style="width: 300px; height: 200px;border:2px solid gray; color:orange;text-align:justify;padding:10px;">Lorem ipsum...</div>

Et voici le résultat :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce nunc nisi, posuere sed lobortis vitae, accumsan id lectus. Nulla facilisi. Aenean a vestibulum turpis. Cras vel metus nec elit gravida adipiscing. Quisque feugiat tempus justo ut dapibus. Curabitur lobortis, dui nec aliquam feugiat, erat erat cursus tellus, lobortis posuere lacus diam cursus quam. Nulla ultrices facilisis sem, sit amet eleifend quam condimentum pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed dictum arcu sagittis turpis tempus tempor. Pellentesque eu vulputate augue. Vestibulum ut nulla eu mi ornare euismod quis at risus.

On voit que le cadre ne respecte pas les dimensions demandées, ou alors le texte sort du cadre (selon votre navigateur).

Pour résoudre se problème, nous allons ajouter un ascenseur au cadre avec la propriété oveverflow du CSS3.
Pour cela il faut utiliser : “overflow: auto;”
ce qui donne :

On remarque l’ascenseur pour faire défiler le texte et la hauteur de 200 pixels du cadre.
et voici le code à utiliser avec la propriété “overflow” :

<div style="border:2px solid #aaaaaa;width:300px;height:200px;color: orange; 
text-align: justify; padding: 10px;overflow:auto;">
Lorem ipsum dolor...
</div>

Ce petit article sur la propriété CSS overflow est terminé.
N’hésitez pas à le partager s’il vous a plu.

Programmation

Comment faire entrer ce texte dans une petite portion d’écran ?