Построчный перенос пунктов меню

[caprella]

Впервые попала на проект с серьезным адаптивным дизайном, и спросить на проекте не у кого. Задача: обычное меню. При больших разрешениях выводится в одну строку, каждый пункт меню однострочный. При среднем размере экрана каждый из пунктов меню должен стать двухстрочным (т.е. не пункты переносятся на вторую строку, а каждый пункт сам по себе в 2 строки начинает располагаться). Вот набросала костяк: http://jsfiddle.net/8cSLF/

Немного игралась с white-space - не вышло. По идее, можно указать ширину для каждого пункта меню, и тогда текст автоматически будет переноситься в его границах, но все пункты разные, и эта идея кажется какой-то "костыльной". Вспомнила, что есть таблицы и обрадовалась, но потом поняла, что не совсем подойдут таблицы, т.к. для маленьких экранов нужно оставлять всего 3 пункта меню, а остальные показывать второй строкой по клику на More (т.е. пришлось бы как-то разбивать таблицу на несколько tr). Да, нужно поддерживать ИЕ7 и 8, поэтому с псевдоклассами и прочими фишками туговато.

Буду очень признательна за помощь, потому что результат хотят быстро, а голова соображает медленно. Спасибо.

[Kray Storm]

По первому абзацу.

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

Раз меню горизонтальное, то, так понимаю, нужно учитывать ограничения по ширине?

У вас же и так уже пункты меню строчно-блочные. Задайте им какой-то подходящий max-width: и vertical-align: для красоты. Манипуляция шириной самого контейнера мне кажется более адекватной реакцией на ограничение области вывода, чем изменение количества строк текста в этих контейнерах. А если две строки окажется мало, чтобы уместиться и нужно будет три? А так весь текст сам решит, на сколько строк ему биться, чтобы уместиться в область.

Вроде такого.

Если я не угадал в подходе, тогда поясните плз, мне будет интересно разобраться.

Кнопку More с появлением дополнительных менюшек на CSS можно реализовать появлением скрытых блоков с позиционированием (хотя, наверное, на скриптах это проще).

Что касается поддержки IE, то для IE7 можно порыться в направлении expression-ов.

Edited February 7, 2013 by Kray Storm

[caprella]

Если я не угадал в подходе, тогда поясните плз, мне будет интересно разобраться.

Да, задача как раз в том, как ограничить ширину каждого пункта, чтобы текст переносился в его границах. Только вот max-width не совсем подходит, потому что текст в каждом пункте ведь разный, и при таком варианте придется для каждого пункта отдельно выставлять этот max-width. Буду сейчас пробовать использовать max-width в %

[SelenIT]

По-моему, табличное поведение тут — самое то (из общедоступного). А для IE7 (которого по статистике 1% и который везде можно и нужно обновить хотя бы до IE8) хватит и display: inline; zoom: 1 для li.

[caprella]

В общем, все-таки остановилась я на display: table. Всем спасибо за помощь и поддержку