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.



En relation avec cet article

Add a Comment

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

Lire plus :
virus thème wordpress
Vérifier la sécurité d’un thème wordpress avec un plugin.

Les thèmes gratuits sont les plus recherchés lorsqu'on se lance dans le blogging sous Wordpress. Il faut néanmoins faire attention...

google position
Les 3 meilleurs sites pour déterminer la position google d’une page pour un mot clé.

Pour connaître la position d'une page web de votre site sur Google pour un ou plusieurs mots clés, il n'est...

flow android
Les 8 meilleurs jeux FLOW pour android

Les jeux FLOW, sont d'un principe très simple. Il faut relier ds points de même couleur par un trait. Les...

Fermer