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)
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 => 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>Merci