Line break when you have more than one word in the menu

Question

I need to break the text in my vertical menu in 2 lines when there is more than one word in the "ul li" item.

In other words, I need to have a tag "br" between the two words in the element "li", but with css.

The images below make things clearer.

I have this IMAGE

I need this IMAGE

Edit1: Live site: http://www.l9web.com.br/sites/test

Answer 1

I found the solution.

On "ul li" we have to set:

white-space: pre-wap

Thanks for all

Answer 2

You can try to use word-spacing.

Try

ul li {
    word-spacing: 'parent-width'; // Percentages will not work 
}

Where 'parent width' is the width of the parent element. Maybe in the case the unordered list? That should give you one word per line. Best of luck!

I created a working pen: https://codepen.io/anon/pen/XYWBWW

If all you are going for is one word per line - set the word-spacing value to be larger than the width of the parent container. Any value will work:

ul li {
  word-spacing: 9999px; // very high value to force one word per line
}