# Useful CSS Stuff

**URL:** <https://forum.inductiveautomation.com/t/useful-css-stuff/95414>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 2, 2024, 1:58am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414 "2024-09-02T01:58:19Z")\
**Posts on this page:** 1\
**Showing post:** 48

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [November 5, 2025, 3:15am UTC](https://forum.inductiveautomation.com/t/useful-css-stuff/95414/48 "2025-11-05T03:15:01Z")

</div>

## Allow Tree Item Text to Wrap

To make tree item text wrap, you can use these styles (some _may_ not be strictly needed…):

```css
/ ********************************************************************** /
/* 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: 16px !important;
}
.terminal-alignment .cross-alignment{
    height: 16px !important;
}

.tree .tree-item-label .label-wrapper{
	align-items: start;
}
/*------------------------------------------------------------------------*/

```

Example:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/2/124933939c8e6a9d25f984a2e1b9ce850af6cc17.png)

---

_[View the full topic](https://forum.inductiveautomation.com/t/useful-css-stuff/95414)._