I want to be able to make a Tree's item expand to show multiple lines, as in the below. I'm using the Tree as a sort of debugger which shows errors, but without multiple lines it's a bit useless...
Something like this?
.tree-item {
height: fit-content !important;
}
.tree-item-label {
height: fit-content !important;
flex: unset !important;
}
.text-scroll{
overflow-wrap: break-word !important;
white-space:pre-wrap !important;
}
I edited to this:
.tree-item {
height: fit-content !important;
padding: 4px 0px; /*added this*/
}
.tree-item-label {
/*height: fit-content !important;*/
flex: unset !important;
flex-wrap: nowrap; /*added this*/
}
.text-scroll{
overflow-wrap: break-word !important;
white-space:pre-wrap !important;
}
But this worked great, thanks as always @victordcq 
(if you edit your post to that (without the comments ofc) i'll mark your post as the solution - as is though it looked a bit funny with the labels pushed up to the top of the row container rather than in the vertical centre)
I'd much rather the bullet lead my eye to the first line of the item content.
I think the bullet was in the centre and the rest of the content was shunted to the top.
I would have to move the line joining the bullet if I wanted to move the bullet to the top, which sounds hard!!
Maybe it's not so hard...
Crap, just noticed the last item is bogus... ah, cause it's the last one and it's put at the end of the vertical stick... ehh, I can live with the last one looking strange
/* edits to the Tree component to display long text on multiple lines */
.tree-item {
height: fit-content !important;
padding: 4px 0px;
}
.tree-item-label {
flex: unset !important;
flex-wrap: nowrap;
}
.text-scroll{
overflow-wrap: break-word !important;
white-space:pre-wrap !important;
}
.tree .tree-alignment.terminal-alignment .cross-alignment{
height: 0.75rem
}
.tree .tree-item-label .label-wrapper{
align-items: start;
}
ah i was bussy looking at it too 
you can use .terminal-alignment.last-child for the last one
.tree-item {
height: fit-content !important;
padding: 4px 0px;
}
.tree-item-label {
flex: unset !important;
flex-wrap: nowrap;
}
.text-scroll{
overflow-wrap: break-word !important;
white-space:pre-wrap !important;
}
.tree .tree-alignment.terminal-alignment .cross-alignment{
height: 0.75rem
}
.tree .tree-item-label .label-wrapper{
align-items: start;
}
.terminal-alignment.last-child{
height: 0.75rem !important;
}
I moved to px like your original last post (before edits) as the 0.75rem stopped working for me after the other bits and pieces, so I'm at this:
.tree-item {
height: fit-content !important;
padding: 4px 0px; /*added this*/
}
.tree-item-label {
/*height: fit-content !important;*/
flex: unset !important;
flex-wrap: nowrap; /*added this*/
}
.text-scroll{
padding-top:2px;
overflow-wrap: break-word !important;
white-space:pre-wrap !important;
}
.label-wrapper-icon {
display: block !important;
padding-top: 4px;
}
.terminal-alignment.last-child{
height: 16px !important;
}
.terminal-alignment .cross-alignment{
height: 16px !important;
}
.tree .tree-item-label .label-wrapper{
align-items: start;
}
Thanks again!! Where there's a will, there's Victor with a hammer and a sledge hammer if the hammer doesn't work
ah i didnt get it up pixel perfect so i just too your values (but seems you found the correct px values )
yep, you had 14px, I went to 16 and it looked good! haha. Nothing like beating it til it conforms 
Although this is an older post, it seems most appropriate for posting my issue. (I am using Version: 8.1.48)
Label wrapping works OK in the first level down in the Tree, but the second level does not wrap, so shows the scroll bar, and the first level then wraps to that width. I want the second level to wrap as well.
This is my current stylesheet.css:
* Direct stylesheet authoring is an advanced feature. Knowledge of CSS required.*/
/* from Useful CSS Stuff - #47 by nminchin */
/* edits to the Tree component to display long text on multiple lines */
.tree-item {
height: fit-content !important;
padding: 3px 0px; /*added this*/ /* or 1px 0px or 4px 0px */
}
.tree-item-label {
flex: unset !important;
flex-wrap: nowrap; /*added this*/
}
.tree .tree-item-label .label-wrapper{
align-items: start;
}
/*------------------------------------------------------------------------*/
/* also from Avoid horizontal scroll bar in tree component */
.tree-item-label .text-scroll {
white-space: pre-wrap !important;
}
/* If you want the icon and text to be vertically centred:*/
/*.label-wrapper.label-wrapper-icon {
margin: auto 0;
}*/
.label-wrapper.label-wrapper-text {
margin: auto 0;
}
/* ################################################### */
/* edits to the Tree component to display long text on multiple lines */
.text-scroll{
padding-top:2px;
overflow-wrap: break-word !important;
white-space:pre-wrap !important;
}
.label-wrapper-icon {
display: block !important;
/*margin: auto 0; /* display in the middle of the line height*/
padding-top: 4px;
}
.label-wrapper-text {
margin: auto 0; /* display in the middle of the line height*/
}
.terminal-alignment.last-child{
height: 16px !important;
}
.terminal-alignment .cross-alignment{
height: 16px !important;
}
/* END: edits to the Tree component to display long text on multiple lines */
/* ################################################### */
With only the first level expanded, this is the display:
When the second level is expanded, this is the display:
I am also wondering how I can identify the classes referenced in the CSS, i.e. is there a reference guide?
You will need to use the browser's dev tools (or the Designer's under Tools > Launch Perspective > External Debugger)
Edit: having a look at this in v8.3.7, it seems that the Tree has changed between 8.1 and this new version. I'm seeing issues as well.
Try this instead:
/**********************************************************************/
/* edits to the Tree component to display long text on multiple lines */
.tree-item {
height: fit-content !important;
padding: 1px 0px; /*added this*/
}
.tree-item-label {
flex: unset !important;
flex-wrap: nowrap; /*added this*/
}
.text-scroll{
padding-top:2px;
overflow-wrap: anywhere !important; /* forces the text to wrap to fit the width */
white-space:pre-wrap !important;
}
.label-wrapper-icon {
display: block !important;
padding-top: 4px;
}
.terminal-alignment.last-child{
height: 12px !important;
}
.terminal-alignment .cross-alignment{
height: 12px !important;
}
.tree .tree-item-label .label-wrapper{
align-items: start;
}
/* Let the row containers grow with their content */
.tree .tree-row,
.tree .parent-node,
.tree .terminal-node {
height: auto !important;
min-height: 24px;
}
/* Make the tree-item itself a flex container that aligns to the top
(so the icon doesn't try to center against the tall text) */
.tree .tree-item {
align-items: flex-start !important;
height: auto !important;
}
.tree .terminal-alignment {
top: 0 !important; /* start at the top of the row */
}
.tree .terminal-alignment .cross-alignment {
position: absolute;
top: 0;
left: 0;
height: 12px !important; /* leg appears at y=12px, near icon center */
width: 100%;
}
/*------------------------------------------------------------------------*/
Thank you for your replies.
The overflow-wrap: anywhere rather than break-word made the difference since there are no spaces in the long label.