Lorsqu'on commence à définir des dimensions précises pour nos blocs, comme on vient de le faire, il arrive qu'ils deviennent trop petits pour le texte qu'ils contiennent.
Les propriétés CSS que nous allons voir ici ont justement été créées pour contrôler les dépassements… et décider quoi faire si jamais cela devait arriver.
Supposons que vous ayez un long paragraphe et que vous vouliez (pour une raison qui ne regarde que vous) qu'il fasse 250 px de large et 110 px de haut. Ajoutons-lui une bordure et remplissons-le de texte… à ras-bord (figure suivante) :
p { width: 250px; height: 110px; text-align: justify; border: 1px solid black; } |
Le texte dépasse du bloc de paragraphe
Horreur ! Le texte dépasse des limites du paragraphe !
Eh oui ! Vous avez demandé des dimensions précises, vous les avez eues ! Mais… le texte ne tient pas à l'intérieur d'un si petit bloc.
Si vous voulez que le texte ne dépasse pas des limites du paragraphe, il va falloir utiliser la propriété overflow. Voici les valeurs qu'elle peut accepter :
Avec overflow: hidden; le texte est donc coupé (on ne peut pas voir la suite), comme sur la figure suivante.
Le texte est coupé aux limites du paragraphe
Essayons maintenant overflow: auto; avec le code CSS suivant (résultat à la figure suivante) :
p { width: 250px; height: 110px; text-align: justify; border: 1px solid black; overflow: auto; } |
Des barres de défilement sont ajoutées au paragraphe
Eurêka ! Des barres de défilement nous permettent maintenant de consulter le contenu qui n'était pas visible.
Il existe une ancienne balise HTML, <iframe>, qui donne à peu près le même résultat. Cependant, l'usage de cette balise est déconseillé aujourd'hui. Elle permet de charger tout le contenu d'une autre page HTML au sein de votre page.
Si vous devez placer un mot très long dans un bloc, qui ne tient pas dans la largeur, vous allez adorer word-wrap. Cette propriété permet de forcer la césure des très longs mots (généralement des adresses un peu longues).
La figure suivante représente ce que l'on peut avoir quand on écrit une URL un peu longue dans un bloc.
Le texte déborde en largeur
L'ordinateur ne sait pas « couper » l'adresse car il n'y a ni espace, ni tiret. Il ne sait pas faire la césure.
Avec le code suivant, la césure sera forcée dès que le texte risque de dépasser (figure suivante).
p { word-wrap: break-word; } |
Le texte est coupé pour ne pas déborder
Je conseille d'utiliser cette fonctionnalité dès qu'un bloc est susceptible de contenir du texte saisi par des utilisateurs (par exemple sur les forums de votre futur site). Sans cette astuce, on peut « casser » facilement le design d'un site (en écrivant par exemple une longue suite de « aaaaaaaaaaa »).
Créé avec HelpNDoc Personal Edition: Écrire des livres électroniques ePub pour l'iPad