[HTML/CSS] Ellipsis en conservant du texte sur la droite - Page 1

Hello,

actuellement la page derniers sujets actifs tronque les titres de sujets trop longs à 50 caractères pour éviter d'affecter la mise en page. C'est un gros hack bien sale et il y a surement moyen de faire beaucoup mieux en utilisant la propriété "text-overflow: ellipsis" disponible en CSS.

Le problème c'est que ça fonctionne très bien pour tronquer les derniers caractères d'une ligne, mais je n'arrive pas à effectuer cette troncature tout en conservant une partie fixe sur la droite. Explication en ASCII art

Voilà schématiquement à quoi ressemblent deux lignes successives dans la liste des derniers sujets :

Titre de mon premier sujet - 27 (+13)
Second titre de sujet - 3 (+2)

Si la largeur de la page réduit j'aimerais tronquer les titres mais conserver le nombre total de messages et le nombre de nouveaux messages sur la droite, comme ceci :

Titre de mon prem... - 27 (+13)
Second titre de sec... - 3 (+2)

Bien sûr, en ajoutant naïvement cette propriété elle tronque en partant des caractères les plus à droite et fait donc disparaître les deux nombres :

Titre de mon premier suj...
Second titre de sujet - ...

Voilà une petite illustration de ce dernier cas, qui respecte à peu près le code HTML utilisé par yAronet : http://dev.mirari.fr/test/ellipsis.html (faite glisser la barre à droite pour déclencher la troncature)Est-ce que vous voyez comment il serait possible de modifier le code HTML pour arriver au résultat que je vise, ou même simplement si ça vous semble possible avec ellipsis ? (je n'en suis pas certain, Google n'a pas été mon ami jusqu'à présent)

Merci

                                <li>
                                        <div class="topic glyph10"> <table><td width="250px" nowrap="true"><p class="topic" style="width:250px;margin-top:0px;margin-bottom:0px"><a class="label active-other" href="#">[F] Les meilleures news =&gt; L'éducation nationale</a></p></td><td nowrap="true">-</td><td nowrap="true"><a class="show" href="#">132</a> (+1)</td></tr></table> </div>
                                </li>

marche pour moi.

Ça ne semble pas encore supporté nativement :
https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/

Mais il y a des workarounds ici :
http://codepen.io/granteagon/pen/pKFyt
http://stackoverflow.com/questions/831552/ellipsis-in-the-middle-of-a-text-mac-style

Oué, tu ne peux pas encore faire d'ellipses en milieu de chaînes. En même temps, ça peut se comprendre... Au mieux, on devrait pouvoir fixer un élément inline frère dessiné sur la même direction d'ellipse, qui serait simplement dessiné "par dessus" les frères qui se font ellipser (?).

Un float: right n'aide pas non plus, ça va directement se coller au bord du conteneur (logique)

Je suppose que pour le moment, tu vas devoir continuer à utiliser ton hack

Et ma solution à base de table? Mais je dois dire que là aussi, il faut utiliser un <p> dans le <td> pour que ça marche, et aussi spécifier une largeur explicitement dans le <p> (cf. le code que j'ai posté). L'idéal serait de pouvoir mettre le class="topic" directement dans le <td> et avoir le navigateur qui fait tout le reste (y compris calculer la largeur restante sans les 2 colonnes non redimensionnables), mais hélas, ça ne marche pas du tout.

./2 : je n'arrive pas trop à voir comment utiliser ta solution ; pour l'instant tu as des largeurs fixes qui trainent, mais si je les retire alors le redimensionnement de la page ne se passe pas bien du tout ; j'imagine qu'il manque quelque chose ?

./3 : j'étais tombé sur ces pages, mais comme dit Warpten l'exemple de code que tu pointes ne fonctionne qu'à condition que la partie de droite soit toujours alignée avec le bord droit du conteneur. Du coup dans le cas de yAronet, tous les compteurs de messages se retrouveraient collés sur le bord droit, comme ça :

Titre de mon premier sujet - 27 (+13)
Second titre                 - 3 (+2)

eh bien, tu fais un discret pointillé, comme pour la table des matières d'nu livre, je suis sûr que ça laissera la zone des titres bien plus claire et agréable à lire.
Tu veux pas tenter juste pour faire un screen, pour voir ?

Zeph (./6) :
./2 : je n'arrive pas trop à voir comment utiliser ta solution ; pour l'instant tu as des largeurs fixes qui trainent, mais si je les retire alors le redimensionnement de la page ne se passe pas bien du tout ; j'imagine qu'il manque quelque chose ?

Non, c'est que sans ces largeurs fixes, ça ne fonctionne pas. Bref, ça sux aussi. Navigateurs de …

Folco, ça peut rendre pas mal, je pense que ça mérite d'être testé.

Kevin Kofler (./8) :

Zeph (./6) :
./2 : je n'arrive pas trop à voir comment utiliser ta solution ; pour l'instant tu as des largeurs fixes qui trainent, mais si je les retire alors le redimensionnement de la page ne se passe pas bien du tout ; j'imagine qu'il manque quelque chose ?

Non, c'est que sans ces largeurs fixes, ça ne fonctionne pas. Bref, ça sux aussi. Navigateurs de …

C'est pas tant la faute des navigateurs que du W3C qui n'a pas considéré ces situations.

loin d'être l'idéal à cause du max width en dur plutôt que juste la place restante, mais simplement un :.topic > a:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width:70%; display:inline-block; } ?

Comme pour toutes les solutions avec des largeurs en double, j'ai peur que ça rende bien seulement dans certains cas puis que ça soit assez moche (en l'occurrence nombres qui débordent ou bien trop de place inutilisée comme actuellement) dès qu'on s'en éloigne :/

et avec une touche de js pour calculer le vrai max width ?

Oui c'est sûr, ça fonctionnerait, mais j'aimerais vraiment trouver une solution sans JS si possible

Enfin tu as raison, à défaut de solution propre il vaut peut-être mieux que les gens qui ont JS activé aient un meilleur rendu.

pour ceux sans js tu peux toujours adapter le max-width avec des media query

après pourquoi ne pas aussi tenter d'adapter la taille de fonte suivant la largeur d'écran avec des vw ? (enfin perso ca ne m'a jamais donné de bon résultats, vivement les "element query"

Bon, je viens d'essayer d'adapter ta solution mais ça ne fonctionne pas du tout. Déjà le fait d'appliquer un style inline-block + overflow hidden augmente la hauteur des éléments (ça semble être un bug que je ne suis pas le seul à avoir, j'ai trouvé plusieurs occurrences sur Google mais pas d'explication ; exemple ; d'ailleurs le bug est également visible dans ton JSFiddle avec Firefox). Ensuite quand je redimensionne, la largeur des éléments à droite ($t dans ton code) est aléatoirement complètement fausse donc ça provoque des clignotements assez crades.

Bref, je crois qu'il va falloir admettre que le web n'est pas prêt pour un besoin aussi complexe que tronquer un texte ailleurs qu'à droite d'un bloc

Je laisse tomber, merci pour votre aide

Quand on voit que ce n'est qu'en 2011 qu'ils ont inventé le texte sur plusieurs colonnes (oui, le truc qui a environ 500 ans), ce n'est pas très étonnant qu'ils n'aient pas pensé à ce besoin ^^

la solution et l'explication du comportement sont dans le thread stackoverflow que tu as lié ^^", le vertical-align:top; à l'air de bien fonctionner sur le fiddle

mon code d'exemple à juste fait une soustraction du total moins la taille de droite, sans regarder padding margin & co, c'est peut être à adapter ici avec un .outerWidth au lieu du .width ?,
(mais si le dom de test était le même que l'actuel, le selecteur jquery de mon code doit passer de ".topic span" en ".topic > span" ou ".topic span.action", sinon normal que ca parte en sucette avec aussi le span.view)

à mon sens, une taille trop grande ferait passer le span.action sur deux lignes, qui donnerais alors une largeur "fausse", un white-space:nowrap; empêchera la coupure de la balise,

j'ai pas optimisé un brin le code du fiddle, mais la taille du span de droite doit être fixe, la sauver au démarrage sans la recalculer devrais être pertinent, tout comme la largeur des .topic devant être commune à tous et mis à jour seulement au resize de la fenêtre ?

voila une meilleure version > http://jsfiddle.net/u6kuc0ua/10/ pas parfaite non plus, les span.action de droite peuvent se barrer à la ligne (peut être à cause de l'espace entre le a.label et le span.action ? avec le magnifique - 10 sur la taille des .topic ça passe #scotch+superglue#)
ca peux flashouiller rapido de temps à autre le temps que ca calcule, mais jsfiddle est lourd et window.resize spamme à donf, peut être faire le vrai calcul à la fin du resize (genre ca) associé à un overflow hidden sur .topic ?

edit > version avec une attente sur le trigger du resize http://jsfiddle.net/u6kuc0ua/15/

En effet, my bad pour le vertical-align je n'ai pas lu les commentaires ^^

Du coup je viens de reprendre ton dernier jsFiddle, j'ai juste modifié un peu le code pour n'avoir aucune taille en dur (ça reste atroce, rien que pour décompter les marges/padding/border je n'ai pas plus simple que "truc.outerWidth (true) - truc.width ()", mais bref ça fonctionne). Pas mal également l'attribut "transition-duration", je ne connaissais pas mais ça permet d'avoir une transition pas trop brutale sans être obligé de tout recalculer à chaque frame. Bon ça reste un peu du bricolage, mais ça semble fonctionner donc pour le moment je garde.

Merci pour le coup de main

pas de soucis

transition-duration est , ça simplifie tellement de choses à peu de frais que pour une fois le mot révolution serait mérité.