Print Page - How to make a node break-word?

I make a basic tree and the children node string is too long then I put the following style but it doesn't work.

Code:

<div id='sidebar2'>
<ul class="easyui-tree">
<li data-options="state:'closed'"><span>Part</span>
<ul>
<li><div><div class='slink'>Part_Apply</div></div></li>
</ul>
</li>
<li data-options="state:'closed'"><span>BOM</span>
<ul>
<li><div style="word-wrap:break-word;word-break:break-all;">Create_New_BOM_SOP____AAAAAAAAAAAAAhdfhdsfhjse</div></li>
</ul>
</li>

Anyone knows how to do it?

The tree node has a fixed height. You can't break the node text. The alternative solution to solve this issue is to limit the node width and show a tip message when hovering this node.

Code:

<li>
	<div title="Create_New_BOM_SOP____AAAAAAAAAAAAAhdfhdsfhjse" style="max-width:100px;overflow:hidden;text-overflow: ellipsis">Create_New_BOM_SOP____AAAAAAAAAAAAAhdfhdsfhjse</div>
</li>

Also, you can use the treegrid instead, which has 'nowrap' property that allows you break a line in a node.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Garrick on July 23, 2014, 06:58:38 PM