Разрешить перенос текста в меню CSS

Question

У меня есть шаблон, который использует неупорядоченный список для создания меню. Смотрите здесь

Когда я перевожу веб-сайт с помощью Google translate, меню прерывается, если переводы слишком длинные, что приводит к выпадению выпадающих списков. Перевод на французский, кажется, вызывает проблему.

Смотрите здесь

Есть ли способ заставить текст обернуть, если он слишком длинный для меню?

Я не против, если мне придется изменить неупорядоченный список на что-то другое, но я бы предпочел не использовать таблицу.

Answer 1

использование перенос слов свойство css

перенос слов: break-word;

Answer 2

Короткая версия: мы собираемся использовать display: table-cell.

Длинная версия .. long:

• Вкл. .access, удалить paddingrule.
• На .sf-menu, удалите float: left и добавьте display: table.
• На .sf-menu li, удалите float: left и добавьте display: table-cell и vertical-align: middle.
• Вкл. #header и #footer, добавьте position: relative.
• Вкл. .access, удалите height: 32px и margin-top: -32px и добавьте position: absolute и width: 100%.
• Вкл. #header .access, добавьте bottom: 0.
• Переместите border-left с sf-menu a на sf-menu li.
• Измените селектор .sf-menu a.first на .sf-menu .first.
• Эта часть не велика, но чтобы вернуть это 20px padding слева (и справа), добавьте дополнительно li в начале: <li class="noHover" style="width: 20px; border-left: 0">&nbsp;</li>;и в конце: <li class="noHover" style="width: 20px; border-left: 0">&nbsp;</li>.Вам может не понадобиться   s.Вам нужно будет сделать то же самое с #footer.

• Чтобы остановить :hover на «отступе» li с, добавьте что-то вроде этого:

  .sf-menu li.noHover:hover {
      background: none !important
  }
  

• Вкл. #footer, добавить padding-top: 48px.

Это все (если я где-то облажался), за исключением для IE6/ 7 поддержка.Если вы хотите этого, вам нужно будет поставить новую версию с примененными моими исправлениями (может быть во временной новой папке, если хотите).Слишком много работы, чтобы попытаться исправить IE6 / 7, когда мне нужно сначала применить все эти изменения, чтобы протестировать его должным образом.

Answer 3

@ Pranay указал в правильном направлении, но вам нужно установить ширину li s, а не ul! так например:

ul.sf-menu li {
   width: 80px; /* make this the maximum width possible! */
   word-wrap: break-word;
}

И вставить очищающий div сразу после меню ul:

<div class="clear"></div>

Где класс clear определяется как:

.clear {
   clear: both;
   width: 0;
   height: 0;
}