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 smile

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)
Et le code HTML correspondant en cliquant ici
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="http://yaronet.org/163/library/jquery-ui/jquery-ui.min.css"> <meta charset="UTF-8"> <script type="text/javascript" src="http://yaronet.org/163/library/jquery/jquery.min.js"></script> <script type="text/javascript" src="http://yaronet.org/163/library/jquery-ui/jquery-ui.min.js"></script> <style type="text/css"> .container { width: 400px; border-right: 3px double black; } .topic { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } </style> </head> <body> <div class="container"> <ul class="topics"> <li> <div class="topic glyph10"> <a class="label active-other" href="#">[F] Les meilleures news =&gt; L'éducation nationale</a> - <a class="show" href="#">132</a> (+1) </div> </li> <li> <div class="topic glyph10"> <a class="label active-first" href="#">arrangeur midi</a> - <a class="show" href="#">1</a> (+24) </div> </li> <li> <div class="topic glyph10"> <a class="label active-other" href="#">Vu sur Epay/leboncon</a> - <a class="show" href="#">438</a> (+80) </div> </li> <li> <div class="topic glyph10"> <a class="label active-first" href="#">La Jaguar dans la presse 2015</a> - <a class="show" href="#">1</a> (+10) </div> </li> <li> <div class="topic glyph10"> <a class="label active-first" href="#">Aaaaah la 5200....HOME ARCADE CONSOLE</a> - <a class="show" href="#">1</a> (+4) </div> </li> <li> <div class="topic glyph10"> <a class="label active-other" href="#">Movie ...</a> - <a class="show" href="#">730</a> (+10) </div> </li> <li> <div class="topic glyph10"> <a class="label active-first" href="#">RetroFreak ou Retro-Fric ?</a> - <a class="show" href="#">1</a> (+34) </div> </li> <li> <div class="topic glyph10"> <a class="label active-other" href="#">Pokemon et Stratégie</a> - <a class="show" href="#">152</a> (+36) </div> </li> <li> <div class="topic glyph10"> <a class="label active-first" href="#">Le Lego de la mort !</a> - <a class="show" href="#">1</a> (+15) </div> </li> <li> <div class="topic glyph10"> <a class="label active-first" href="#">ReVival fait peau neuve !</a> - <a class="show" href="#">1</a> (+22) </div> </li> <li> <div class="topic glyph10"> <a class="label active-other" href="#">SNES Test : Killer Insctinct</a> - <a class="show" href="#">9</a> (+5) </div> </li> <li> <div class="topic glyph10"> <a class="label active-other" href="#">Miaou ! </a> - <a class="show" href="#">382</a> (+89) </div> </li> <li> <div class="topic glyph10"> <a class="label active-first" href="#">"Appel à témoins" Atari Jaguar</a> - <a class="show" href="#">1</a> (+4) </div> </li> <li> <div class="topic glyph10"> <a class="label active-first" href="#">Gautlet et Xevious</a> - <a class="show" href="#">1</a> (+3) </div> </li> <li> <div class="topic glyph10"> <a class="label active-other" href="#">Estimations</a> - <a class="show" href="#">6661</a> (+127) </div> </li> <li> <div class="topic glyph10"> <a class="label active-other" href="#">Inventaire des numéros de série des consoles Atari Jaguar</a> - <a class="show" href="#">361</a> (+41) </div> </li> <li> <div class="topic glyph10"> <a class="label active-first" href="#">Images trop compressés</a> - <a class="show" href="#">1</a> (+1) </div> </li> <li> <div class="topic glyph10"> <a class="label active-other" href="#">Jeu communautaire X</a> - <a class="show" href="#">105</a> (+3) </div> </li> <li> <div class="topic glyph10"> <a class="label active-first" href="#">émulateur floppy sfrm72-fu-dl</a> - <a class="show" href="#">1</a> (+12) </div> </li> <li> <div class="topic glyph10"> <a class="label active-other" href="#">Mini PC</a> - <a class="show" href="#">33</a> (+0) </div> </li> </ul> </div> <script type="text/javascript"> $('.container').resizable({handles: 'e'}); </script> </body> </html>
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 smile
avatarAll right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

2

                                <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.
avatarMes news pour calculatrices TI: Ti-Gen
Mes projets PC pour calculatrices TI: TIGCC, CalcForge (CalcForgeLP, Emu-TIGCC)
Mes chans IRC: #tigcc et #inspired sur irc.freequest.net (UTF-8)

Liberté, Égalité, Fraternité

3

avatarZeroblog

« Tout homme porte sur l'épaule gauche un singe et, sur l'épaule droite, un perroquet. » — Jean Cocteau
« Moi je cherche plus de logique non plus. C'est surement pour cela que j'apprécie les Ataris, ils sont aussi logiques que moi ! » — GT Turbo

4

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 grin

5

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.
avatarMes news pour calculatrices TI: Ti-Gen
Mes projets PC pour calculatrices TI: TIGCC, CalcForge (CalcForgeLP, Emu-TIGCC)
Mes chans IRC: #tigcc et #inspired sur irc.freequest.net (UTF-8)

Liberté, Égalité, Fraternité

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 ?

./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)
avatarAll right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

7

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. smile
Tu veux pas tenter juste pour faire un screen, pour voir ?
avatar<<< Kernel Extremist©®™ >>>
Feel the power of (int16) !

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. sad Bref, ça sux aussi. Navigateurs de censure
avatarMes news pour calculatrices TI: Ti-Gen
Mes projets PC pour calculatrices TI: TIGCC, CalcForge (CalcForgeLP, Emu-TIGCC)
Mes chans IRC: #tigcc et #inspired sur irc.freequest.net (UTF-8)

Liberté, Égalité, Fraternité

9

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

« Tout homme porte sur l'épaule gauche un singe et, sur l'épaule droite, un perroquet. » — Jean Cocteau
« Moi je cherche plus de logique non plus. C'est surement pour cela que j'apprécie les Ataris, ils sont aussi logiques que moi ! » — GT Turbo

10

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. sad Bref, ça sux aussi. Navigateurs de censure

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

11

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; } ?

12

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 :/
avatarAll right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

13

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

14

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

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.
avatarAll right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

15

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"

16

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 grin

Je laisse tomber, merci pour votre aide smile
avatarAll right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

17

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 ^^
avatar<<< Kernel Extremis©®™ >>> et Inventeur de la différence administratif/judiciaire ! (©Yoshi Noir)

<Vertyos> un poil plus mais elle suce bien quand même la mienne ^^
<Sabrina`> tinkiete flan c juste qu'ils sont jaloux que je te trouve aussi appétissant

18

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/

19

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 top
Le code actuel
$(function () { var resize; $(window) .on ('resize', function () { if (resize) clearTimeout (resize); resize = setTimeout (function () { $('div.topic').each (function () { var action; var label; var width; $(this).css ({whiteSpace: 'nowrap'}); action = $(this).find ('span.action'); label = $(this).find ('a.label'); width = $(this).innerWidth () - label.outerWidth (true) + label.width () - action.outerWidth (true); label.css ({ display: 'inline-block', maxWidth: width + 'px', overflow: 'hidden', textOverflow: 'ellipsis', transitionDuration: '100ms', verticalAlign: 'top' }); }); resize = undefined; }, 100); }) .triggerHandler ('resize'); });
avatarAll right. Keep doing whatever it is you think you're doing.
------------------------------------------
Besoin d'aide sur le site ? Essayez par ici :)

20

pas de soucis smile

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