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.

Ces articles pourraient vous intéresser :

Add a Comment

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

Lire plus :
backlinks
Les 4 meilleurs sites pour connaître et suivre l’évolution des backlinks.

Avoir une vue d'ensemble des backlinks d'un site et connaître leur évolution au cours du temps, est indispensable pour le SEO...

word docx
3 convertisseurs de fichiers Word docx en doc en ligne.

Depuis les dernières versions de Word 2007 puis Word 2010, le format d'enregistrement des documents Word a changé. Bien qu'elle...

PastaCode plugins
Le meilleur plug-in wordpress pour afficher du code

Si vous avez un blog wordpress High-Tech, vous serez peut-être confronté à des problèmes d'affichage de codes HTML, Javascript ou...

Fermer