# Wrapping of Menu item

**URL:** <https://forum.inductiveautomation.com/t/wrapping-of-menu-item/117385>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [October 8, 2026, 11:16am UTC](https://forum.inductiveautomation.com/t/wrapping-of-menu-item/117385 "2026-10-08T11:16:50Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![sanjanakrishnamurthy](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@sanjanakrishnamurthy](https://forum.inductiveautomation.com/u/sanjanakrishnamurthy)\
**Post date:** [October 8, 2026, 11:16am UTC](https://forum.inductiveautomation.com/t/wrapping-of-menu-item/117385/1 "2026-10-08T11:16:50Z")

</div>

Hi,

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/c/7c1c03d2c0cafad39a5b1d1460695f85af3a72a7.png)

I'm using a Tree component here.

How do i wrap a menu-item?

Thanks!

---

<div class="post-metadata">

**Author:** ![ryan.white](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ryan.white/32/73193_2.png) [@ryan.white](https://forum.inductiveautomation.com/u/ryan.white)\
**Post date:** [October 8, 2026, 1:36pm UTC](https://forum.inductiveautomation.com/t/wrapping-of-menu-item/117385/2 "2026-10-08T13:36:18Z")

</div>

You'll need to adjust the style properties of the tree, likely on the `selectedStyle` and `unselectedStyle` properties. White-space, wrap-mode, and possibly max-width are properties you might need to adjust to get your text to wrap.

Since the tree defaults to scrolling sideways if text overflows, you may need to adjust this setting as well.

> **[appearance Properties​ - Perspective - Tree | Ignition User Manual](https://www.docs.inductiveautomation.com/docs/8.1/appendix/components/perspective-components/perspective-display-palette/perspective-tree#appearance-properties)**
>
> See the Perspective - Tree Scripting page for the full list of scripting functions available for this component. | The Tree component displays a tree hierarchy based on an array of objects.

---

<div class="post-metadata">

**Author:** ![sanjanakrishnamurthy](https://avatars.discourse-cdn.com/v4/letter/s/bcef8e/32.png) [@sanjanakrishnamurthy](https://forum.inductiveautomation.com/u/sanjanakrishnamurthy)\
**Post date:** [October 9, 2026, 3:30am UTC](https://forum.inductiveautomation.com/t/wrapping-of-menu-item/117385/3 "2026-10-09T03:30:43Z")

</div>

```json
{
  "textOverflow": "truncate",
  "expandIcons": {
    "collapsed": {
      "path": "material/arrow_right",
      "color": "#000000",
      "style": {}
    },
    "expanded": {
      "path": "material/arrow_drop_down",
      "color": "#000000",
      "style": {}
    },
    "empty": {
      "path": "",
      "color": "#000000",
      "style": {}
    }
  },
  "defaultNodeIcons": {
    "expanded": {
      "path": "material/folder_open",
      "color": "#000000",
      "style": {
        "zoom": ""
      }
    },
    "collapsed": {
      "path": "material/folder",
      "color": "#000000",
      "style": {}
    },
    "empty": {
      "path": "material/stop",
      "color": "#000000",
      "style": {
        "fill": "#000000",
        "fontSize": 19
      }
    }
  },
  "selectedStyle": {
    "fontFamily": "Verdana",
    "fontSize": 14,
    "overflowWrap": "break-word",
    "textOverflow": "clip"
  },
  "unselectedStyle": {
    "fontFamily": "Verdana",
    "fontSize": 14,
    "overflowWrap": "break-word",
    "textOverflow": "clip"
  },
  "rowHeight": 35
}

```

Here's my props.appearance.... And the menu item is still not being wrapped...

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/f/9f81c8993f05aa048d2341ee80a704336d30f2cd.png)

Am i doing something wrong?

---

<div class="post-metadata">

**Author:** ![Cose\_Peter1](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/cose_peter1/32/79174_2.png) [@Cose\_Peter1](https://forum.inductiveautomation.com/u/Cose_Peter1)\
**Post date:** [October 9, 2026, 4:19am UTC](https://forum.inductiveautomation.com/t/wrapping-of-menu-item/117385/4 "2026-10-09T04:19:06Z")

</div>

I got this from Gemini and edited some parts of it to apply the changes to only one style class. It worked when I tested.  
You can add this on advanced style sheet and apply the style class **wrap-tree** to your tree component.

```python
.psc-wrap-tree .tree-item {
    height: fit-content !important;
    padding: 3px 0px;
}

.psc-wrap-tree .tree-item-label {
    flex: unset !important;
    flex-wrap: nowrap;
}

.psc-wrap-tree .text-scroll {
    padding-top: 2px;
    overflow-wrap: break-word !important;
    white-space: pre-wrap !important;
}

.psc-wrap-tree .tree-item-label .label-wrapper {
    align-items: start;
}

```