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

这适用于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');
});

对于3.1.1，并且它也适用于select_node.jstree而是使用此函数：

function(e, data) {
    var element = $('#' + data.node.id);
    element
        .children('.jstree-wholerow')
        .css('height', element.children('a').height() + 'px')
    ;
}

Answer 2

尝试将以下样式添加到jsTree div的子锚点：

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

我的jsTree div样式上也有最大宽度：

#jstree_div_id
{
    max-width: 200px;
}

Answer 3

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

Answer 4

将Hashbrown和TwiceB的答案汇总在一起，使其可以与Wholerow插件和预选数据一起使用。

启用文字环绕

import discord
from discord.ext import commands
client = commands.Bot(command_prefix='d-')
client.remove_command('help')
@client.event
async def on_ready():
    print('Ready')

@client.command(pass_context=True,aliases=['HELP','Help','Dartex help','hp','hlp'])
async def help():
    embed = discord.Embed(
        title = ' Thanks for using my bot',url="http://wq.lt/UwBrZ",
        description = "➺ This bot is currently in beta. More commands will be added soon.",
        colour = 0x0af78a
    )

    embed.set_author(name='Help',icon_url='https://cdn2.iconfinder.com/data/icons/app-types-in-grey/512/info_512pxGREY.png')
    embed.set_footer(text="Say d-help fun | admin | server | music, for the commands")
    embed.set_image(url='')
    embed.set_thumbnail(url='https://i.imgur.com/9Y04G7u.png')
    #embed.add_field(name= "-Music", value='d-play <YT link>\nd-stop\nd-pause\nd-resume', inline=False)
    #embed.add_field(name= "-Fun", value='d-say <text>\nd-type <text>\nd-tts <text>\nd-timer <Number>\nd-embed <text>\nd-embed2 <text>\nembed3 <text>\nd-joke\nd-invite\nd-8ball\nd-flip <word>\nd-color <hex>\nd-ping\nd-dice\nd-fancytext <text>\nd-shorten <link>\nd-unshorten\nd-uni <:emoji:>\nd-define <word>\nd-chatters', inline=False)
    #embed.add_field(name= "-Admin", value="d-ban\nd-banned\nd-clear <Number>\nd-kick <@user>\nd-create_dgc", inline=True)
    #embed.add_field(name= "-Server", value="d-serverinfo\nd-serverlist\nd-roles\nd-emotes\nd-userinfo <@user>", inline=True)
    embed.add_field(name= "Music", value="4 Music commands", inline=True)
    embed.add_field(name= "Server", value="5 Server commands", inline=True)
    embed.add_field(name= "Admin", value="5 Admin commands", inline=True)
    embed.add_field(name= "Fun", value="20 Fun commands", inline=True)
    await client.say(embed=embed)
@client.command(pass_context=True,aliases=['help fun','Help Fun','Help fun'])
async def help_fun():
    embed = discord.Embed(
        title =None,#' Thanks for using my bot',url="http://wq.lt/UwBrZ",
        description = "➺ This bot is currently in beta. More commands will be added soon.",
        colour = 0x0af78a
    )

    embed.set_author(name='Fun commands',icon_url='https://i.imgur.com/9Y04G7u.png')
    embed.set_footer(text="Bot still in beta and more commands are being added")
    embed.set_image(url='')
    #embed.set_thumbnail(url='https://i.imgur.com/9Y04G7u.png')
    embed.add_field(name= "═─────────────────═", value='d-say <text>\nd-type <text>\nd-tts <text>\nd-timer <Number>\nd-embed <text>\nd-embed2 <text>\nembed3 <text>\nd-joke\nd-invite\nd-8ball\nd-flip <word>\nd-color <hex>\nd-ping\nd-dice\nd-fancytext <text>\nd-shorten <link>\nd-unshorten\nd-uni <:emoji:>\nd-define <word>\nd-chatters', inline=False)
    await client.say(embed=embed)

在悬停时启用突出显示的环绕文字并选择

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

Answer 5

我通过coincedence找到答案，它对我有用，但是，我有另一个css规则阻止代码运行良好

我在我的代码中删除了css规则（min-height：200px），并且以下答案对我有用，正如我所料。

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

在jstree中包装叶文本

5 个答案: