# Horizontal menu, split text over 2 line when the width of the item is fixed

**URL:** <https://forum.inductiveautomation.com/t/horizontal-menu-split-text-over-2-line-when-the-width-of-the-item-is-fixed/95426>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 2, 2024, 10:47am UTC](https://forum.inductiveautomation.com/t/horizontal-menu-split-text-over-2-line-when-the-width-of-the-item-is-fixed/95426 "2024-09-02T10:47:17Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mazeyrat](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mazeyrat/32/10955_2.png) [@mazeyrat](https://forum.inductiveautomation.com/u/mazeyrat)\
**Post date:** [September 2, 2024, 10:47am UTC](https://forum.inductiveautomation.com/t/horizontal-menu-split-text-over-2-line-when-the-width-of-the-item-is-fixed/95426/1 "2024-09-02T10:47:17Z")

</div>

When text are too long in the **MenuTree** , the text is automatically split over 2 lines without special item style.

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/a/6ab667be4b155d431d5953f59d48704048b0b869.png)

With the **Horizontal Menu** , if we want limit the **width** of the item, the text is not split over 2 lines. Is there a way to achieve this ?

```python
wordWrap = break-word

```

has no effect

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/0/b0549db79d8ae9153da3a92eb9064ac0d72ed418.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [September 2, 2024, 11:14am UTC](https://forum.inductiveautomation.com/t/horizontal-menu-split-text-over-2-line-when-the-width-of-the-item-is-fixed/95426/2 "2024-09-02T11:14:44Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/f/2fc61260a24aeb9b1b36e715dd6085cbb9a096d6.png)  
add this in the stylesheet

```python
.horizontal-menu-menu-item span{
  white-space: pre-wrap !important;
  word-break: break-word;
  margin:auto;
  justify-content: center;

}

```

(optional: `text-align: center;` )

OR with a class added to the item style if you only want it on specific items

```python
.psc-SomeCustomClass span{
  white-space: pre-wrap !important;
  word-break: break-word;
  margin:auto;
  justify-content: center;
 
}

```