jstreeにリーフテキストをラップする

Question

xstファイルに基づいてツリーを埋め込むためにjstreeプラグインを使用しています。いくつかのノードのテキストはコンテナdivより大きい。テキストを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

あなたjsTreeのdiv要素の子アンカーに次のスタイルを追加してみてください：

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

私もjsTree divのスタイリング上の最大幅を持っている：

#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

これは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; 
} 

また、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

私はcoincedenceで答えを発見し、それは私のために働いた、しかし、私は私がCSSルール（最小高さ：200pxのを）削除も

を機能からコードを防止して、別のCSSルールを持っていました"私のコードで"と私の期待通りに次の答えが私のために働いた。

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