Tronquer un text trop long ?

Bonjour,

Quelle solution css utilisez-vous pour que du texte soit tronqué au bout de x lignes (ex: résumés d'articles dans une liste...)

Pour le faire en css, les tutos indiquent d'appliquer à minima:

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

Par contre, chez moi, ça n'a jamais fonctionné au delà d'une ligne de texte. Ce qui n'a pas vraiment d'intérêt.

Par contre, l'un des sites qui proposent ce tuto, utilise lui un autre code :

display: -webkit-box;
overflow-y: hidden;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Et là ça fonctionne... Je suis perplexe. Qu'en pensez-vous ?
Modifié par jlba (12 Oct 2022 - 12:17)

Bonjour,

Ça semble effectivement un code possible, mais c'est encore expérimental. Ça veut dire qu'il faut surveiller les évolutions si on utilise cette technique (le nom des propriétés pourrait changer, la syntaxe pourrait changer, etc.)

Amicalement,

Bonjour,

C'est supporté largement ... avec le préfixe -webkit- (c'est encourageant, mais on est dans les sables mouvants quand même).

Dans le 1er code text-overflow: ellipsis a un comportement défini depuis pas mal de temps. Il est explicitement prévu que le rognage n'a pas lieu "dans le sens de progression du texte". Il n'a lieu que si le texte dépasse horizontalement de sa boite. Et pour que ça arrive dans le cas général, il faut forcer le texte à s'afficher sur une seule ligne, sinon le texte continue de s'afficher sur les lignes suivantes et il n'y a jamais de dépassement horizontalement. Dans certains cas particuliers, on peut obtenir quand même des dépassements horizontaux même si le texte est affiché sur plusieurs lignes, par exemple quand la boite est très étroite et que certains mots sont trop longs pour être affichés sur une seule ligne. On aura alors un ... ajouté à la fin de chaque ligne contenant un mot trop long : tu peux t'amuser à faire le test. C'est d'ailleurs selon moi principalement ce problème (mots trop longs pour être affichés en entier, en particulier sur les boutons) qui est réglé par text-overflow: ellipsis. Le comportant ayant été ainsi défini, on ne peut plus changer ça facilement.

Ensuite, dans le 2e code, le nombre de ligne (ici -webkit-line-clamp: 3), la nature du display (ici display: -webkit-box) et de l'orientation (ici -webkit-box-orient: vertical;) semblent devoir être précisés pour que l'algorithme puisse s'en sortir.

Evidemment, ceux qui ont proposé "ça" avaient pas mal d'autres possibilités. Mais ils ont choisi "ça" ... pour l'instant.

À mon avis ça peut encore changer, car en l'état, ça fait un peu bidouille. Mais ça peut aussi rester provisoire pendant des années ou adopté définitivement dans quelques mois.

Amicalement,