Bonjour à tous,
 
Voilà j'ai un problème avec mes balises <span> et la propriété CSS "overflow".
Je veux en fait dans une <div> globale de type inline (sans retour charriot), avoir plusieurs conteneurs inline (sans retour charriot) d'où mes <span>. Dans ces <span>, je veux que le texte trop long soit tronqué. Pour cela j'utilise la propriété CSS "overflow: hidden;".    
 
Sous IE ça marche niquel mais sous firefox, il m'empêche de tronquer mon texte et mes <span> me font exploser l'interface en largeur.    
J'ai essayé avec des <div>, ça marche sur les deux navigateurs sauf que pour éviter d'avoir des retours charriots entre mes <div>, j'ai rajouté la propriété "display: inline;" et là surprise, sous Firefox, la troncature ne fonctionne plus rien qu'en mettant cette propriété CSS...    
 
Après de nombreuses recherches sur le net et des tests, il me semble que le problème vient du fait que cette propriété CSS ne fonctionne pas sur des conteneurs "en ligne" (inline) et je ne vois pas pourquoi.    
 
J'ai pu contourner le problème en plaçant au pixel près mes <div> avec du javascript mais ça m'ennuie un peu niveau performance et maintenabilité de la fonctionnalité dans le temps.    
 
Avez-vous une idée ???    
 
Voici mon exemple :
 

 
 
Merci beaucoup pour votre aide.      

text-overflow:ellipsis;
 
je connais pas  
ca doit etre du css3 donc inutile dans la plupart des cas (je crois qu il y a juste opera 9+ qui commence a les gerer)
par contre pour qu il y ait un overflow il faudrait penser a preciser a partir de quelle taille il apparait

bin s't'à dire que le span c'est un element inline, tu peux lui définir la taille que tu veux ça va pas changer grand chose... En partant de là mettre un overflow s'pas gagné gagné!!!
et je parle pas des positions absolutes sans coordonnées ou du clear both sur un element non flottant ...
( a moins qu'il n'y ait des déclarations dans ton my.css ...)

text-overflow: ellipsis;
 
=> ça marche avec IE mais pas avec Firefox, se n'est pas un problème pour moi actuellement, j'ai trouvé un site qui me donne le code CSS pour que ça fonctionne sous Firefox.
 
Quant à la taille de mes <span>, elles sont définies dans mon Script JS pour le overflow car tout ça doit être dynamique bien sûr...
 
En ce qui concerne les positions absolute, j'ai oublié de les retirer, elles sont présente pour placer mes <div> précisément les unes à côté des autres comme un élément inline via un script JS que je n'ai pas publié dans mon code.
 
Je pense en effet que mon problème vient des éléments inline qui ne supporte pas le overflow...

c'est un peu normal que le overflow n'est pas supporté par les éléments inline.
 
Pour que le overflow fonction, il faut que ton élément soit dimensionné.
et un élément inline, ne peut être dimensionné, c'est la règle

Ok très bien, je ne le savais pas alors maintenant je vais poser mon problème différemment :
 
Je développe un produit actuellement et j'ai un historique de navigation dans un bandeau du style :
link1 > link2 > link3 > menu courant
 
Mon soucis est que si les link possède un libellé trop grand, ça me fait péter l'interface. Mon idée était d'encapsuler chaque link dans un conteneur et d'appliquer un overflow pour limiter la taille de chacun. Puis d'avoir un bouton permettant d'afficher les libellés en entier en cas de besoin. Le soucis avec les div, c'est qu'elles sont les unes en dessous des autres et moi je veux qu'elles soient en ligne.
 
Avez-vous une idée ???
 
Merci pour votre aide.

tu mets des libellés courts sur les liens et une infobulle avec plus de renseignements sur tes liens.
 
Pour les visiteurs sans js, tout marchera mais avec une perte au niveau "ergonomie" dûe à leur choix!

Le problème c'est que les libellés sont récupérés dynamiquement et correspondent au nom des menus, je ne peux pas les modifier et c'est le fonctionnement normal du produit tel qu'il a été prévu à son développement en 2000.  
L'info-bulle, c'est déjà prévu étant donné que je voulais tronquer les libellés avec le overflow: hidden;
 
J'ai pensé à effectuer des troncatures du texte via du code JS mais je voulais faire un truc simple et facile à maintenir. Le CSS me semblait être une bonne solution pour moi maintenant si se n'est pas réalisable, je ferai plus compliqué...

Quand tes divs sont en display: block tu fais float: left pour qu'ils soient sur la même ligne.
C'est un des problèmes de mise en page les plus basiques.

En effet avec un float: left; ça marche, mes div sont les unes à la suite des autres et avec les <div>, je peux faire mon "overflow: hidden;"...
 
Merci beaucoup !!!