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 :
generateur theme wordpress
7 générateurs de thèmes WordPress en ligne.

Vous n'arrivez pas à trouver le thème WordPress qui vous convient ? Et si vous le créiez vous même. Ce...

7 conseils indispensables pour vos achats en ligne

Noël approche et avec lui, ses nombreux cadeaux. Pendant cette période, la tentation de faire "clic - clic" sur les sites...

feedburner
Comment créer un flux RSS avec FeedBurner et le synchroniser avec Twitter ?

Connaissez-vous "beds are burning" de REM ? Et bien ça n'a rien à voir avec feedburner. Feedburner est une solution...

Fermer