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 :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]


Lorem ipsum

[/pastacode]

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 :

[pastacode lang= »markup » message= » » highlight= » » provider= »manual »]


Lorem ipsum

[/pastacode]

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 e-mail 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 :
poireau
Leek Wars : programmez l’intelligence de vos poireaux pour gagner la bataille !

Quels sont les points communs entre un poireau, l'intelligence artificielle et une bataille sanglante ? Pas d'idée? Eh bien, c'est Leek...

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...

galaxie
Tutoriel : créer un effet de parallaxe avec jQuery

Vous avez certainement déjà visité un site en une seule page ou les articles se succèdent les uns à la...

Fermer