[résolu] Text-overflow:ellipsis

Bonjour,

J'ai voulu mettre à profit un tutoriel de Raphaël sur les débordements de div. Mais je n'ai jamais réussi à appliquer la propriété ellipsis (text-overflow:ellipsis).

J'ai fais un essai en ligne sur une balise article pour vous montrer, c'est ici : Essai pour text-overflow:ellipsis

<article class="ellipsis">[Essai pour text-overflow:ellipsis...]</article>

.ellipsis{text-overflow:ellipsis}

Si quelqu'un pouvait me dire d'où viens mon erreur, je lui serais très reconnaissant.
Modifié par Olivier C (04 Jun 2012 - 20:52)

Bonjour,

les blocs à l'intérieur du bloc ne s'ellipsent pas (traduction terre-à-terre). Voir ici dans la spec:
http://www.w3.org/TR/css3-ui/#text-overflow
Cela fonctionnait avec une ancienne spec, mais plus maintenant, cela devait sûrement provoquer des bugs avec un autre module.

En gros, text-overflow n'est utilisable que pour du texte sur une seule ligne ou, comme dans l'exemple de Raphaël, pour des chaines de caractères sans espace qui dépasseraient la largeur du conteneur. Dès que tu as plusieurs lignes de texte, et si tu veux que ça coupe automatiquement à N lignes (ou N peut être variable) en rajoutant par magie des points de suspension… ben c'est pas géré par text-overflow, désolé.

Le cas typique qui marche bien c'est donc:

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

C'est donc utile pour des éléments d'interface qui doivent rester sur une ligne (bouton, navigation, fil d'ariane, etc.), mais pas utilisable pour du teaser text, contrairement à ce qu'on peut faire sur une application iOS par exemple:


(Le rendu des titres peut être obtenu en CSS. Pas celui du texte d'accroche.)


(Le texte d'accroche à gauche peut être affiché sur 3, 2 ou même une seule ligne suivant l'espace occupé par le titre. Il est toujours terminé par des points de suspension à la fin de la dernière ligne. Impossible à réaliser en CSS.)

Oh la boulette, merci fvsch, ça m'apprendra à lire des vieilles spec au hasard

Merci pour vos interventions messieurs, spécialement à fvsch pour sa réponse assez complète. C'est toujours un plaisir d'avoir à faire à vous. Je règlerai donc l'affichage côté php pour que le texte soit correctement coupé.

Bien à vous