testo foglia wrapping in jstree

Question

Sto usando il plugin jstree per popolare il mio albero in base al file xml. Il testo di alcuni nodi è maggiore del div contenitore. C'è un modo per avvolgere i testi dei nodi jstree?

$(document).ready(function(){ 
    $("#tree").jstree({ 
     "xml_data" : { 

      "ajax" : { 

       "url" : "jstree.xml" 

      }, 

      "xsl" : "nest" 


     }, 
     "themes" : { 

      "theme" : "classic", 

      "dots" : true, 

      "icons" : true 

     }, 

     "search" : { 

       "case_insensitive" : true, 

       "ajax" : { 

        "url" : "jstree.xml" 

       } 

      }, 
       "plugins" : ["themes", "xml_data", "ui","types", "search"] 


    }).bind("select_node.jstree", function (event, data) { 

     $("#tree").jstree("toggle_node", data.rslt.obj); 

Answer 1

Prova ad aggiungere il seguente stile per il bambino ancore del vostro jsTree div:

#jstree_div_id a { 
    white-space: normal !important; 
    height: auto; 
    padding: 1px 2px; 
} 

Ho anche un max-width sulla mia jsTree div styling:

#jstree_div_id 
{ 
    max-width: 200px; 
} 

Answer 2

#tree_id { 
    .jstree-anchor { 
    white-space: normal; 
    height: auto; 
    } 
    .jstree-default .jstree-anchor { 
    height: auto; 
    } 
} 

Answer 3

Questo ha funzionato per 3.0.8

.jstree-anchor { 
    /*enable wrapping*/ 
    white-space : normal !important; 
    /*ensure lower nodes move down*/ 
    height : auto !important; 
    /*offset icon width*/ 
    padding-right : 24px; 
} 

E per coloro che utilizzano il plug-in wholerow;

//make sure the highlight is the same height as the node text 
$('#tree').bind('hover_node.jstree', function() { 
    var bar = $(this).find('.jstree-wholerow-hovered'); 
    bar.css('height', 
     bar.parent().children('a.jstree-anchor').height() + 'px'); 
}); 

Answer 4

ho trovato la risposta da coincedence e ha funzionato per me, ma, ho avuto un'altra regola CSS che impediva il codice di funzionare bene

ho rimosso la regola CSS (min-height: 200px) "nel mio codice" e la risposta seguente ha funzionato per me come mi aspettavo.

#tree_div_id a { 
white-space: normal; 
height: auto; 
padding: 0.5ex 1ex; 
margint-top:1ex; 
}