Yann "Bug" Dubois

Développeur WordPress freelance à Paris
Flux RSS

CSS : limiter la taille des textes en hauteur

17 May 2011 Par : Yann Dubois Catégorie : Français, tech

Voici une “bonne” façon de limiter la hauteur d’un bloc de texte, y compris pour le réduire à une simple ligne. Elle passe par l’utilisation de plusieurs propriétés des feuilles de styles intéressantes, mais sinon méconnues, en tout cas largement sous-employées. Le tout en CSS “pur”, sans faire appel au javascript ni au PHP. Exemples.

Limiter un titre à une ligne

On va combiner quatre attributs CSS dans notre feuille de style pour obtenir nos fins :

max-height : comme son nom anglais l’indique, cet attribut fixe une hauteur maximum pour le bloc de contenu. Le plus simple pour limiter le bloc à une ligne de texte est en général de fixer cet attribut à la valeur relative 1em qui (pour simplifier…) correspond toujours à la hauteur d’une ligne de texte “normal”.

overflow : mal connu ou mal compris, cet attribut détermine ce que le navigateur doit faire avec le contenu qui “déborde” de l’espace autorisé pour le bloc. En réglant cette valeur sur “hidden” on fait “disparaître” tout le texte qui ne tient pas dans notre hauteur maximale, qui se retrouve caché, ou non affiché dans la page (les moteurs de recherche et autres navigateurs non-visuels continuent cependant à le “voir”).

text-overflow : cet autre attribut va nous permettre de définir un comportement “élégant” pour le cas où le texte est tronqué, à savoir d’ajouter un caractère “d’ellipse“, autrement dit trois points de suspension, qui indiquent que le texte a été raccourci à l’affichage.

white-space : dernier attribut méconnu, celui-ci nous permet d’éviter que le texte ne se réorganise sur plusieurs lignes pour “échapper” à notre contrainte. En indiquant la valeur “nowrap”, on empêche en effet le texte de couler sur plusieurs lignes : limité à une unique ligne insécable, le texte va “déborder” sur la droite, et forcer le comportement décrit par l’attribut “text-overflow” à se déclencher, à savoir que le texte qui dépasse va être masqué, et que des points de suspension vont automatiquement être affichés pour signaler la coupure artificielle. Si on n’utilise pas cet attribut, le texte sera masqué, mais comme il se déploie (de façon invisible) “vers le bas”, les points de suspension n’apparaîtront pas.

NB : il faut bien évidemment que le bloc sur lequel on travaille soit contraint en largeur pour que le comportement s’applique, faute de quoi le bloc va simplement “s’élargir” pour accommoder le texte complet sur une ligne. Si le reste de la mise en page ne contraint pas la largeur du bloc, elle peut être fixée avec les attributs width ou max-width.

Voici notre exemple complet, à appliquer par exemple à un bloc div :

div.titre_uneligne {
  max-height: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Cette syntaxe est supportée par tous les navigateurs récents (Chrome, Firefox, IE) et sur toutes les plateformes courantes (GNU/Linux, OS commerciaux). Elle est sans risque pour la compatibilité et l’accessibilité ou le référencement : au pire sur un navigateur non standard, le texte continuera à déborder, ou les points de suspension n’apparaîtront pas.

Faire des blocs de texte qui se “déroulent” quand on les survole à la souris

Bien pratique pour économiser de la place à l’écran avec des informations qui ne s’affichent que si l’utilisateur le souhaite, ces blocs se “déploient” quand on les survole à la souris et se “replient” dès qu’on cesse de les survoler, ne laissant apparaître que la quantité de texte désiré (chapô, accroche, titre,…).

A noter que si on veut afficher plus d’une ligne de texte, il ne faut pas utiliser l’attribut “whitespace: nowrap”, et régler la hauteur “max-height” en conséquence (en fonction de l’interlignage choisi avec “line-height”). Mais à ce moment là, les points de suspension n’apparaîtront pas correctement (ils n’apparaissent que quand le text est coupé “vers la droite”, d’où la nécessité de le contraindre sur une seule ligne pour arriver à nos fins dans le premier exemple).

div.bloc_deroulant {
  max-height: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

div.bloc_deroulant:hover {
  max-height: none;
  white-space: normal;
}

Explications : pour “détendre” notre bloc de contenu textuel à la façon d’un ressort, il suffit de ne plus contraindre sa hauteur, en annulant la propriété “max-height”, et de lui permettre de se dérouler sur plusieurs lignes en supprimant la contrainte “nowrap”. Pour rendre ce comportement ergonomique plus facile à comprendre pour les visiteurs, on peut recourir à une image de fond figurant une petite flèche vers le bas, par exemple, afin de laisser entendre que le bloc peut se “dérouler” vers le bas si on approche sa souris.

Mêmes remarques que ci-dessus pour la compatibilité.

Alire aussi concernant la propriété “overflow” : utiliser “hidden” au lieu du hackclearfix“.

A lire également...

WordPress › Error

There has been a critical error on your website.

Learn more about debugging in WordPress.