упрощено, у меня есть три элемента A, B и C. B и C вместе в делении. если горизонтального пространства достаточно (окно браузера достаточно широко), я хочу, чтобы они отображались как
A B C
пока тривиально. если окно становится меньше, я хочу, чтобы они обернулись так:
A
B C
Я решил это, передав div style.whiteSpace = "nowrap".
проблема в том, что B C теперь просто больше не будет переноситься, даже если для их отображения недостаточно места. когда окно становится еще меньше, я хочу, чтобы это отображалось как
A
B
C
, поэтому я ищу более мягкую версию nowrap, которая предотвращает перенос, если есть место, куда можно уклониться, но позволяет переносить, если нет.
EDIT:
ответ решил вышеупомянутое, заставив все всплыть: http://jsfiddle.net/nF4k5/6/
это заставило меня понять, что мое упрощение зашло слишком далеко. на самом деле в моем приложении A текст и имеет обертывание в себе, поэтому иногда будет заполнять всю ширину. B и C можно представить как отдельные слова, которые должны появиться
а) вместе в последней строке текста А или, если они там не подходят друг другу
б) на новой строке или если эта строка слишком короткая
в) на две строки.
Я сделал пример для игры: http://jsfiddle.net/nF4k5/5/
Экраны меньшего размера должны давать:
A A A A B C
A A A A
B C
A A A
A B C
A A
A A
B C
A
A
A
A
B
C
было бы особенно неплохо, если бы решение не включало внесение изменений в A, как, например, добавление nowrap к div в div вокруг B C, что не работает.
EDIT:
Решение: вместо того, чтобы дать оболочке B и C whiteSpace = "nowrap", я даю ему display = "inline-block".