Mise en forme d'un menu arborescent et retour à la ligne

Bonjour,

Je me heurte à un problème de mise en page en tentant d'utiliser un menu arborescent. Mon souci étant que les feuilles, si le texte est trop long, tronquent le texte à la taille du div qui contient tout l'arbre plutot que de les afficher sur la ligne suivante.

Un exemple valant mieux qu'on long discours, j'ai mis une version très simpliste qui isole le problème :

http://h.lassiege.free.fr/

Voici le html d'un noeud en particulier :

<div ext:tree-node-id="ynode-61" class="x-tree-node-el x-tree-node-leaf x-unselectable toto" unselectable="on">
            <span class="x-tree-node-indent">
                <img src="testFiles/s.gif" class="x-tree-elbow-line">
            </span>
            <img src="testFiles/s.gif" class="x-tree-ec-icon x-tree-elbow">
            <img src="testFiles/s.gif" class="x-tree-node-icon" unselectable="on">
            <a hidefocus="on" class="x-tree-node-anchor" href="http://localhost:8082/consoleWeb/dispatch.gp3?def=v1.index.page&amp;pageNameV1=/gestionBase/UserEnvAssoc.jsp" tabindex="1">
                <span class="normalspan" style="white-space:normal" unselectable="on">titre de feuille assez long qui dépasse</span>
            </a>
        </div>

pour simplifier, un noeud est composé d'une indentation, des différents éléments qui matérialisent les traits de l'arbre, de l'icone, puis du texte.
Dans le css, il y a une propriété :
white-space : nowrap sur l'élément x-tree-node ce qui explique que je ne reviens pas à la ligne.

A mon avis ce n'est pas à cet endroit qu'il faut changer en white-space: normal puisque sinon le texte qui revient à la ligne va couper les traits de l'arbre.
L'idée serait plutot que le retour à la ligne soit juste en dessous du texte, c'est à dire aligné sur l'icone.
J'ai pensé le faire en rajoutant un

style="white-space:normal" 

sur le span du texte mais ca n'a rien changé.

Est ce que quelqu'un aurait une idée ?

À mon avis le passage à la ligne n'est pas possible. Tu peux t'inspirer de l'explorateur Windows, il y a un ascenseur en bas lorsque le texte est trop long.
C'est le nœud en T qui pose problème ici, il y aurait une coupure même dans le cas d'une césure juste en dessous du texte, à moins de superposer le nœud en T sur une image en I avec un repeat-y .
Plus simplement tu peux changer l'overflow de la div ext-gen14 en auto pour avoir un ascenseur en bas quand c'est nécessaire.

En fait la solution d'affichage sur le site en question a pris une optique différente, celle de ne pas afficher les lignes entre les feuilles et c'est ca qui permet d'utiliser le retour à la ligne.
J'avais réussi à obtenir un rendu similaire en utilisant white-space : pre et sans les lignes sur le coté.
Après j'ai une autre contrainte en fait, c'est que je voulais utiliser extjs comme librairie javascript et que je suis plutot en java coté serveur ^^

pour info sur extjs : www.extjs.com

La solution avec les tooltips m'a cependant convenu pour l'instant. Une autre serait de changer radicalement la mise en page et j'ai une idée la dessus mais ce ne sera pas pour tout de suite ^^