Я перестраиваю выпадающее меню, похожее на поле <select>, используя div и jquery. Div, содержащий выпадающие элементы, должен иметь минимальную ширину, но не максимальную ширину, поскольку она должна расти вместе с самым широким элементом в списке (так что если у меня очень длинный элемент, например "[Это самый длинный элемент в контейнере]", весь контейнер должен быть таким же широким, как и эта запись.
Теперь я почти получил то, что хочу, используя white-space:nowrap для каждого элемента в контейнере, чтобы текст элемента не продолжался в новой строке. Проблема заключается в том, что текстовые потоки выходят из окна, вместо того, чтобы позволить коробке расти вдоль текста. Я не могу понять, как решить эту проблему. Я уже пробовал text-overflow:ellipsis, но похоже, что он просто скрывает переполненный текст и добавляет три точки (...) в конец.
Итак, вот моя проблема в двух словах: как я могу позволить div расти вместе с текстом внутри него, когда на него применяется white-space:nowrap, вместо того, чтобы пропускать текст из него? Я не хочу скрывать текст, используя overflow:hidden, я хочу показать всю строку.
Спасибо заранее!
Ширины элементов блока не зависят от их содержимого в обычной модели статического макета CSS. Вы можете получить "сжимаемое поведение" как часть других свойств макета:
float: leftposition: absolutedisplay: inline-block если не указано явное width.
У меня была аналогичная проблема, она была решена путем указания значения заполнения в px вместо процента.
Существует ли максимальная ширина в любом из выбранных родительских элементов?
Это остановит работу белого пространства. display: таблица отменяет максимальную ширину, если она установлена.