28172 sujets

CSS et mise en forme, CSS3

Problème avec direction:rtl et texte terminé par caractère type ( ou -

Bonjour à tous,

je souhaite afficher un chemin du style Documents / Sous Dossier / Sous sous Dossier
dans une div où l'attribut CSS direction aura pour valeur "rtl".

Le problème est que si mon chemin se termine par, par exemple, - ou ) ou ' ce dernier caractère se retrouve complètement à gauche (en première position).

Exemple :
Mon vrai chemin : Documents / Sous Dossier / Sous sous Dossier (1)
Affichage : (Documents / Sous Dossier / Sous sous Dossier (1
ou Documents / Sous Dossier / Sous sous Dossier (1-
affiche -Documents / Sous Dossier / Sous sous Dossier (1

le code HTML :

<div class="divL" style="width:402px; height:20px; margin:1px 3px 0px 3px; padding:0px 10px; background:#e7e6e0;">
	<div id="pathConteneurId" class="path_conteneur">Documents / Sous Dossier / Sous sous Dossier (1)</div>
</div>


le CSS :
.path_conteneur {
	position:relative;
	width:auto; max-width:402px; height:14px;
	margin-top:4px;
	padding:0px 4px;
	overflow:hidden;
	direction:rtl;
	white-space:nowrap;
	font-family:Arial; font-size:11px; line-height:13px;
	float:left; display:inline;
}
.divL {
	position:relative;
	width:auto;
	margin-left:0px; margin-top:0px;
	padding:0px;
	float:left; display:inline;
}



Ce bug se produit sur Firefox et IE.
Auriez-vous une idée sur cette bizarrerie ?

Merci d'avance.
Bonjour,
Pourquoi vouloir ajouter l'attribut direction ici ? Oo Il me semble que la langue dans laquelle ton texte est écrit se lit bien de gauche à droite :o (ltr)

Est-ce que ce que tu souhaites c'est que le texte "texte" s'affiche "etxet" ?
Merci de te pencher sur mon problème.

En fait direction:rtl me sert à forcer l'overflow:hidden à masquer les caractères dépassant à gauche.
Avec un simple text-align:right les caractères sont masqués à droite.

Je n'ai trouvé que ça comme solution ...
Bonjour,

Ceci marche sur FF, à tester sur IE...
#pathConteneurId:after {
    content:"o";
    visibility:hidden;
    font-size:0;
}
Si ça ne marche pas sous IE, tu peux toujours tenter ceci :
<div>Ton fil d'ariane<span class="invisibleCharacter">o</span></div>
.invisibleCharacter {
    visibility:hidden;
    font-size:0;
}

Modifié par Gothor (14 Feb 2012 - 14:30)
En effet cela fonctionne sur firefox et même IE 9 (pas encore tester sur le 7 & 8).

C'est vrai que d'ajouter un caractère disons "normal" après les () ou - évite le bug, mais le "after" je ne connaissais pas !

Merci beaucoup pour cette astuce.

Si je peux me permettre j'ai une autre question ...
Si je rajoute :

-o-text-overflow:ellipsis;
text-overflow:ellipsis;

à ma classe pathConteneur, j'ai bien les ... à gauche et le texte nickel sur firefox alors que sur IE9 les ... sont bien à gauche mais le texte s'aligne à gauche.
Est ce corrigeable ?
xtremdisc a écrit :
sur IE9 les ... sont bien à gauche mais le texte s'aligne à gauche.
Comment ça ? L'affichage fait quelque chose comme
... Documents / Sous Dossier / Sous
au lieu de
... / Sous Dossier / Sous sous dossier
?
Gothor a écrit :
Comment ça ? L'affichage fait quelque chose comme
... Documents / Sous Dossier / Sous
au lieu de
... / Sous Dossier / Sous sous dossier
?


Oui exactement, sur FF c'est bon mais sur IE c'est comme tu l'as écrit.
Je suis sous IE8 et je n'ai pas ce problème. Sous ce navigateur, le pseudo-élément after ne semble pas pris en compte, donc j'ai été obligé de passer par le fameux élément span vide...

En réduisant ton code au maximum, j'obtiens : 
<div>Documents / Sous Dossier / Sous sous Dossier (1)<span class="hiddenCharacter">o</span></div>
div {
    display : inline-block;
    position : relative;
    max-width:200px;
    overflow:hidden;
    direction:rtl;
    white-space:nowrap;
    -o-text-overflow:ellipsis;
    text-overflow:ellipsis;
}
.hiddenCharacter {
    font-size : 0;
    visibility : hidden;
}

Modifié par Gothor (14 Feb 2012 - 16:40)
Merci pour le test sur IE8, du coup je vais utiliser la class "hiddenCharacter" qui fonctionne également sur IE9.

Par contre il y a toujours le bug sur IE9 si je met les text-overflow:ellipsis.
bonsoir,

si la page est generé coté serveur, il suffirait probablement d'ajouter un caractère insécables ( &bnsp;).

ou bien imbriquer 2 élement et jouer avec :
float : pour l'alignement a droite.
marge négatives : pour virtuellement reduire à zero de largeur (ou presque ) l'element flotteur.
white-space : pour laisser sur une seule ligne (facultatif ou selon ce que tu recherches).
inline-block: comme initialement et qui contient les flottants.

ex:
<p class="hideleft"><span>texte alliigggneeeerrrrrrrrrrrrrrrr àààààààààààààààààààààààààààààààààààààààààààààààààààà gaaaaaauuuuuuuuuuuuuuuuuuucccccccccccccchhhhhhhhhhhhhhhhhhhhhhhhhhhhheeeeeeeeeeeeeeeeeeeeeeeeee</span></p>

p.hideleft {display:inline-block;width:200px;}
p.hideleft span {float:right;margin-lef:t-9999px;white-space:nowrap}


... si j'ai compris ton soucis Smiley smile

cordialement,
GC
Merci GC pour ton idée mais la première solution fonctionne mieux car quand le texte est court, je veux qu'il soit aligné à gauche.

J'ai donc utilisé la solution de Gothor avec un commentaire conditionnel pour IE qui enlève le text-overflow:ellipsis.

Par contre, Gothor, j'ai tester sur IE8 via IETester avec text-overflow:ellipsis actif et j'ai le même bug qu'avec IE9, quand tu m'as dit que ça fonctionnait sur IE8 c'était bien avec le text-overflow:ellipsis ?

Et d'après IETester, IE7 avec direction:rtl ne fonctionne pas. Décidément !
Effectivement, en fonction du mode d'affichage, ça fonctionne, ça fonctionne pas, ça fonctionne plus, ça fait des choses curieuses...

Je pense qu'il va falloir prévoir quelque chose de différent pour IE...
Sujet clos
Aller à