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

Voici un texte de « Lorem ipsum », un faux texte utilisé en imprimerie depuis des siècles pour la mise en page et dont l’origine remonterait à l’antiquité. Pour plus d’information aller sur le site Lorem ipsum. vous trouverez toute l’histoire de ce faux texte et un générateur en ligne.

« 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…. »Notre propos n’est pas le Lorem ipsum, mais nous allons l’utiliser pour répondre à cette question :

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

Voici un cadre 300×200 avec le Lorem ipsum à l’intérieur :

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.

 

Le code pour ce cadre est le suivant :

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

On voit tout de suite le problème, le texte déborde du cadre.
La première idée qui vient à l’esprit est de réduite la taille de la police de caractère. Ici elle vaut 14px on pourrait la passer en 8px.

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.

 

Un autre problème apparaît : c’est illisible.

CSS3 permet de contourner cette difficulté, par l’ajouter d’un ascenseur aux conteneurs.

Pour cela il faut utiliser :« overflow: auto;« 

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.

Et voici le code avec ascenseur :

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

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

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Lire plus :
plugin WordPress
Comment choisir et installer les meilleurs plugins WordPress ?

Voici un tout petit article pour guider les personnes embarrassées devant plusieurs Plugins WordPress et ne sachant pas lequel choisir. Il est...

gateau-aniversaire
Candy Crush a un an comme Outils Web !

Vous prendrez bien une part ! Eh oui, le jeu légendaire Candy Crush a un an comme outils-web.fr ! Candy...

video phots vacances
4 sites pour créer des montages vidéos avec vos photos

Pour se raconter ou montrer ses vacances, rien de tel qu'une vidéo. Mais les vidéos sont longues à filmer puis...

Fermer