Bonjour,
J'ai une liste dont chaque élément li contient 2 divs à l'intérieur d'un div "main" :
- div "main" a une longueur fixes (disons 200px),
- div "part1" a une longueur variables (celle du texte et images qu'il contient)
=> J'aimerais que le texte affiché dans div "part2" ait pour longueur celle de div "main" moins div "part1"
Qui devrait donner :
A BlaBla...
ABC BlaB...
ABCDE Bl...
J'ai tenté mais ça ne fonctionne pas:
PS: La solution CSS avec text-overflow: ellipsis; semble parfaite mais puisque non compatible avec tout les navigateurs je me rabats sur le JS
Modifié par Tchernobyl (11 Aug 2012 - 02:04)
J'ai une liste dont chaque élément li contient 2 divs à l'intérieur d'un div "main" :
- div "main" a une longueur fixes (disons 200px),
- div "part1" a une longueur variables (celle du texte et images qu'il contient)
=> J'aimerais que le texte affiché dans div "part2" ait pour longueur celle de div "main" moins div "part1"
...
<li>
<div class="main">
<div class="part1">A</div>
<div class="part2">BlaBlaBla</div>
</div>
</li>
<li>
<div class="main">
<div class="part1">ABC</div>
<div class="part2">BlaBlaBla</div>
</div>
</li>
<li>
<div class="main">
<div class="part1">ABCDE</div>
<div class="part2">BlaBlaBla</div>
</div>
</li>
...
Qui devrait donner :
A BlaBla...
ABC BlaB...
ABCDE Bl...
J'ai tenté mais ça ne fonctionne pas:
$(function(){
$(".part1").each(function(){
var $this = $(this);
var $len = 0;
var $len = $this.outerWidth();
var $lenParent =$this.parent().outerWidth();
var newText2 = $this.next('.part2').text().substring(0,$lenParent-$len);
$this.next('.part2').innerHtml(newText2+"...");
});
});
PS: La solution CSS avec text-overflow: ellipsis; semble parfaite mais puisque non compatible avec tout les navigateurs je me rabats sur le JS
Modifié par Tchernobyl (11 Aug 2012 - 02:04)