Разрыв строки, когда в меню более одного слова

Question

Мне нужно разбить текст в моем вертикальном меню на 2 строки, если в элементе «ul li» более одного слова.

Другими словами, мне нужен тег «br»между двумя словами в элементе "li", но с помощью css.

Приведенные ниже изображения проясняют ситуацию.

У меня есть ИЗОБРАЖЕНИЕ

Мне нужно это ИЗОБРАЖЕНИЕ

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

Answer 1

Я нашел решение.

На "ul li" мы должны установить:

пробел: предварительный wap

Спасибо всем

Answer 2

Вы можете попробовать использовать интервал между словами.

Попробуйте

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

Где 'родительская ширина' - ширина родительского элемента.Может в случае неупорядоченного списка?Это должно дать вам одно слово в строке.Удачи!

Я создал рабочую ручку: https://codepen.io/anon/pen/XYWBWW

Если все, что вам нужно, это одно слово в строке - установите значение межстрочного интервала больше шириныродительский контейнер.Подойдет любое значение:

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