Table des matières
Niveau
..........
En rapport...

Introduction

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 !

Mon texte est vraiment trop long pour mon petit div de 200px !
Seulement, il arrive parfois que la partie importante du texte soit a droite et pas a gauche… On aimerais donc que le navigateur cache en partant du bord gauche…
Nous allons voir que ce n'est pas si évident que ça…

Principe

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.

En pratique

Voici donc le code HTML qui en résulte :

html4strict
<div class="wraped">
<div>Mon texte est vraiment trop long pour mon petit div de 200px !</div>
</div>

Et du coté du CSS :

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;
}
Pourquoi “* html .wraped div” serait réservé a IE ?
Logiquement * html désigne un élément html descendant d'un quelconque élément du document. Dans un document web normalement constitué, l'élément html est l'élément racine, il ne peut être descendant d'un autre élément. * html désigne donc un ensemble vide d'élément et la règle CSS qui suit ce sélecteur doit être ignorée. IE (MAC ou PC) a une anomalie qui le conduit à un comportement opposé. (source)

Exemple

Mon texte est vraiment trop long pour mon petit div de 200px !

IE et Firefox

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