wrapping leaf text in jstree

Question

Я использую плагин jstree для заполнения моего дерева на основе xml-файла. Текст некоторых узлов больше, чем контейнер 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 сНу стайлинга:

#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, которая препятствовала код хорошо функционировать

Я удалил правило CSS (мин-высота: 200px) «в моем коде», и следующий ответ работал на меня, как я ожидал.

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