使用工具提示jquery fancytree字符串长度自定义

Question

在fancytree树结构中显示数据时，我想要按以下方式显示长字符串。应该显示前24个字符，然后像省略号（“apple ...”），并且在悬停时应该在工具提示中显示完整的字符串。

有没有一种有效的方式来构建我们所需的UI元素？我有一个正确的结构json数据，我需要构建fancytree。

Answer 1

您可以使用CSS截断带有椭圆的长文本，但这是基于树标题的宽度（以像素为单位），而不是字符。下面的CSS演示了如何截断长职称以上75像素的长度：

span.fancytree-title { 
    width: 75px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
} 

要显示Fancytree节点的完整标题的提示，你可以设置NodeData对象的tooltip选项，如下所示：

{ 
    title: "Node Long title 1", 
    tooltip: "Node Long title 1" 
} 

显示CSS和工具提示的完整示例可以在this JSFiddle中找到。