Lorsque vous avez un texte plus long que l'espace que vous voulez lui allouez, en CSS vous pouvez le cacher en utilisant overflow:hidden.
Cette balise va masquer tout ce qui dépasse mais en partant du bord droit.
ex :
Mon texte est vraiment trop long pour mon petit div de 200px !
On pourrais imaginer qu'il suffit d'aligner le texte a droite pour que le navigateur, intelligent, coupe a gauche mais il n'en ai rien.
L'idée va donc être de créer une DIV qui va contenir une seconde DIV.
La 1ère div fixera les dimension de la zone affiché et la 2ème va contenir le texte et sera positionné a droite de la 1ère.
Voici donc le code HTML qui en résulte :
<div class="wraped"> <div>Mon texte est vraiment trop long pour mon petit div de 200px !</div> </div>
Et du coté du CSS :
.wraped { /* Les border ne sont la que pour vous montrer ce qu'il se passe */ border:1px solid red; /* Longueur de la zone affichable */ width:200px; overflow:hidden; } .wraped div { /* Les border ne sont la que pour vous montrer ce qu'il se passe */ border:1px solid blue; /* Longueur toujours plus grande que le texte */ /* (pour qu'il soit toujour sur une seule ligne) */ width:500px; /* On aligne tout a droite */ text-align:right; float:right; } * html .wraped div { /* CSS Destiné uniquement à IE */ /* Cette longueur est la même que celle de la zone affichable */ width:200px; overflow:hidden; white-space: nowrap; direction: rtl; }
Comme d'habitude IE et firefox ne réagisse pas pareil, c'est pour cela que le code comprend 2 parties.
IE utlise une balise CSS qui lui est propre ( white-space ) pour faire en sorte que le texte soit sur une seule ligne, de ce fait, il faut que le contenant soit juste a longueur affichable.
En revanche, firefox doit avoir un contenant plus grand que le texte pour que celui-ci soit sur une seule ligne.
De la même façon IE utilise direction: rtl pour dire que le texte s'écrit de droite a gauche.
Mais Firefox ne comprend pas cette balise, il faut donc rusé avec une 2eme div (la 2ème div est en fait la 1ère dans le code, celle avec la classe “wraped”).
— iDo 17/01/2006 16:09
Discussion