Salut,
Je viens d'être confronté au problème de la propriété text-overflow (CSS3) qui n'est pas implémentée dans Firefox (alors qu'elle fonctionne avec IE6+, Konqueror, Opera et Safari... avouez que c'est ballot quand même).
Voici la contrainte : le site comporte des "boites" (graphiquement parlant), qui contiennent des listes d'un certain nombre d'éléments. Pour des raisons d'esthétique indépendantes de la volonté des développeurs, du webmaster et des graphistes, il faut que les boites soient toutes de même dimension. Pour parfaire ces boites, il faut qu'elles aient le même espacement en bas (c'est à dire entre le dernier élément et la bordure du bas). Comme chaque boite a autant d'éléments que ses soeurs (autant de lignes), il faut s'assurer que chaque ligne sera tronquée.
On peut évidemment le faire depuis PHP, avec une simple césure en nombre de caractères.
Inconvénients :
- on utilise PHP pour gérer la Vue (dans une logique MVC)
- suivant la police, sa taille, les caractères (les i sont moins larges que les m), on obtient un résultat plus ou moins satisfaisant.
L'autre solution est d'utiliser la propriété CSS3 text-overflow, en lui donnant la valeur ellipsis
Cette propriété permet d'ajouter (par exemple) "..." après le texte qui aura été préalablement césuré au bon endroit.
Inconvéinent : cela fonctionne avec à peu près tous les navigateurs récents, mais pas Firefox (même dans sa version 3).
Une solution qui ne me satisfaisait pas se trouve ici : http://www.jide.fr/emulate-text-overflowellipsis-in-firefox-with-css (il existe une petite erreur dans le CSS donné)
Elle n'est pas satisfaisante, parce que même si le texte n'est pas tronqué, il est quand même suivi de "...".
Pour pallier ceci, j'ai utilisé JS (plus exactement jQuery, parce que moi, JS, c'est vraiment pas mon truc à la base).
J'ai donc mon code HTML ressemble donc à quelque chose comme ça :
Niveau CSS :
Là, ça fonctionne sur IE, Konqueror, Safari (grâce à text-overflow: ellipsis;) et même sous Opera (avec -o-text-overflow:ellipsis;, ce qui est un moindre mal)
Sur Firefox, c'est tronqué, mais on n'a pas les trois petits points quand c'est coupé.
Il reste un petit bout de JS pour que sous Firefox, ça soit correct (avec jQuery) :
Et le tour est joué.
Il ne reste plus qu'un petit inconvénient visuel, et un autre technique.
Visuellement : les lignes sont coupées "violemment", c'est à dire que ce n'est pas une vraie césure après un caractère. Une lettre peut être coupée en deux. Ca surprend un peu, mais ce n'est pas très gênant.
Techniquement : ça fait utiliser JS (pire : une lib entière dans le cas décrit ici) pour rajouter trois malheureux petits points... Si on utilise la lib pour autre chose, on rentabilise le chargement. Sinon, on remercie les développeurs de jQuery pour sa relative légèreté.
Voilà... J'espère ne pas m'être planté de forum pour partager ça, sinon, faut pas hésiter à ranger comme il faut.
Bonne journée
Je viens d'être confronté au problème de la propriété text-overflow (CSS3) qui n'est pas implémentée dans Firefox (alors qu'elle fonctionne avec IE6+, Konqueror, Opera et Safari... avouez que c'est ballot quand même).
Voici la contrainte : le site comporte des "boites" (graphiquement parlant), qui contiennent des listes d'un certain nombre d'éléments. Pour des raisons d'esthétique indépendantes de la volonté des développeurs, du webmaster et des graphistes, il faut que les boites soient toutes de même dimension. Pour parfaire ces boites, il faut qu'elles aient le même espacement en bas (c'est à dire entre le dernier élément et la bordure du bas). Comme chaque boite a autant d'éléments que ses soeurs (autant de lignes), il faut s'assurer que chaque ligne sera tronquée.
On peut évidemment le faire depuis PHP, avec une simple césure en nombre de caractères.
Inconvénients :
- on utilise PHP pour gérer la Vue (dans une logique MVC)
- suivant la police, sa taille, les caractères (les i sont moins larges que les m), on obtient un résultat plus ou moins satisfaisant.
L'autre solution est d'utiliser la propriété CSS3 text-overflow, en lui donnant la valeur ellipsis
Cette propriété permet d'ajouter (par exemple) "..." après le texte qui aura été préalablement césuré au bon endroit.
Inconvéinent : cela fonctionne avec à peu près tous les navigateurs récents, mais pas Firefox (même dans sa version 3).
Une solution qui ne me satisfaisait pas se trouve ici : http://www.jide.fr/emulate-text-overflowellipsis-in-firefox-with-css (il existe une petite erreur dans le CSS donné)
Elle n'est pas satisfaisante, parce que même si le texte n'est pas tronqué, il est quand même suivi de "...".
Pour pallier ceci, j'ai utilisé JS (plus exactement jQuery, parce que moi, JS, c'est vraiment pas mon truc à la base).
J'ai donc mon code HTML ressemble donc à quelque chose comme ça :
<div>
<ul>
<li class="ellipsis"><span>Texte trop long pour tenir sur une seule ligne</span></li>
<li class="ellipsis"><span>Petit texte</span></li>
</ul>
</div>Niveau CSS :
.ellipsis span {
white-space:nowrap;
text-overflow:ellipsis; /* for internet explorer */
-o-text-overflow:ellipsis /* for Opera */
overflow:hidden;
display:block;
max-width:145px; /* à adapter en fonction des besoins */
width:auto !important;
float:left;
}
.ellipsis {
clear: both;
}Là, ça fonctionne sur IE, Konqueror, Safari (grâce à text-overflow: ellipsis;) et même sous Opera (avec -o-text-overflow:ellipsis;, ce qui est un moindre mal)
Sur Firefox, c'est tronqué, mais on n'a pas les trois petits points quand c'est coupé.
Il reste un petit bout de JS pour que sous Firefox, ça soit correct (avec jQuery) :
<script type="text/javascript" src="/jQuery-1.2.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("li.ellipsis span").each(function(i) {
if (this.offsetWidth == parseInt($('li.ellipsis span').css("maxWidth"))) {
$(this).after('...');
}
})
});
</script>Et le tour est joué.
Il ne reste plus qu'un petit inconvénient visuel, et un autre technique.
Visuellement : les lignes sont coupées "violemment", c'est à dire que ce n'est pas une vraie césure après un caractère. Une lettre peut être coupée en deux. Ca surprend un peu, mais ce n'est pas très gênant.
Techniquement : ça fait utiliser JS (pire : une lib entière dans le cas décrit ici) pour rajouter trois malheureux petits points... Si on utilise la lib pour autre chose, on rentabilise le chargement. Sinon, on remercie les développeurs de jQuery pour sa relative légèreté.
Voilà... J'espère ne pas m'être planté de forum pour partager ça, sinon, faut pas hésiter à ranger comme il faut.
Bonne journée
