Limiter le texte à une seule ligne en CSS


Sur un site web, il arrive qu’il soit nécessaire d’empêcher un texte de prendre plusieurs lignes. Plusieurs techniques pour y parvenir, dont une très pratique que j’ai découverte aujourd’hui, uniquement à base de CSS.

Le problème

Lors du développement de BP Top Tracker, j’ai été face à ce problème:
limitertexte

Dans certains cas, comme celui-ci, le texte à afficher est trop long, et occupe donc plusieurs lignes. Pour garder une régularité entre tout le contenu, je désirais limiter ce contenu à une seule ligne. Si le contenu dépassait, il fallait alors qu’il soit coupé au bon endroit, en y ajoutant « … » pour indiquer que le texte ne figure pas en entier.

Les solutions

Il y a plusieurs solutions à ce problème.

En PHP

La technique est assez simple. Il s’agit de couper la chaine de caractères directement en PHP, avant de l’afficher. Pour cela, on définit le nombre maximum de caractères, et on applique la fonction quand nécessaire.

function shortenText($text, $size) {
    if (strlen($text) > $size)
        return substr($text, 0, $size).' ...';
    return $text;
}

Cette technique comporte trois problèmes. Tout d’abord, vous devez fixer la taille en nombre de caractères. Il va donc falloir y aller à tâton pour trouver la bonne mesure. Ce qui ne sera plus valable dès qu’on changera la taille de la police, la taille du container, … Deuxièmement, le contenu coupé ne sera pas du tout affiché sur la page. Cela pourrait cependant être important de conserver le contenu en entier pour les robots des moteurs de recherche. Et enfin, dès que votre texte contient des balises HTML, il y a de fortes chances pour que la coupure ne se fasse pas au bon endroit et vienne tout casser. Il faudrait alors envisager une fonction plus compliquée qui découperait intelligemment en prenant en compte les balises. Pas chouette.

En javascript

La solution qu’on trouve le plus fréquemment, c’est d’utiliser du javascript. L’avantage étant que cette fois, tout le contenu sera sur la page pour les moteurs de recherche, et cela s’adaptera correctement aux changements d’affichage.
Par contre, c’est faire du javascript pour le plaisir étant donné qu’il existe bien plus simple comme solution.

En CSS

Trois lignes de CSS suffisent pour résoudre ce problème.

.foo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Le white-space: nowrap; permet de préciser que le texte ne doit jamais aller à la ligne. Du coup, il débordera du container dans lequel il se trouve. La deuxième ligne sert donc à masquer tout ce qui dépasse. Et enfin, le text-overflow: ellipsis; va permettre d’avoir les « … » à la fin.

Au final, on a ce résultat:
limitertexte2

facebooktwittergoogle_pluspinterestlinkedintumblrmailfacebooktwittergoogle_pluspinterestlinkedintumblrmail

Laisser un commentaire.