Line-clamp responsive avec TailwindCSS

Supportée par plus de 97% des navigateurs, la propriété CSS line-clamp fait le bonheur des développeurs (et des designers) en permettant de limiter le nombre de lignes d'un paragraphe sans avoir recours à des méthodes approximatives telles que la troncature arbitraire du texte basée sur un nombre de lettres ou de mots.

Utilisation avec TailwindCSS

Sans surprise, TailwindCSS permet l'utilisation de cette propriété via la classe line-clamp-x qui, en plus d'ajouter cette propriété, ajoute les propriétés overflow: hidden, le mode d'affichage display: -webkit-box et d'autres propriétés permettant une prise en charge par un plus grand nombre de navigateurs de cette fonctionnalité.

Line-clamp responsive avec TailwindCSS

Si on veut cacher du texte sur mobile et l'afficher avec un nombre de lignes limités sur desktop, il peut être tentant d'écrire une classe du type :

<!-- 🚫 Not working -->
<p class="line-clamp-3 hidden md:block">Lorem ipsum dolor sit amet [...].</p>

Surprise, le texte dépasse le nombre de lignes sur desktop et ne prend plus en compte line-clamp.

En fait, ce fonctionnement est tout à fait normal. Comme je le disais plus haut, line-clamp nécessite un mode d'affichage spécifique display: -webkit-box. Celui-ci est ajouté par la classe line-clamp, mais il se retrouve outrepassé par la classe md:block qui le change en display: block.

En gardant en tête que line-clamp-x ajoute une classe de display, nous pouvons donc résoudre notre problème en l'utilisant de cette façon :

<!-- ✅ Working -->
<p class="hidden md:line-clamp-3">Lorem ipsum dolor sit amet [...].</p>