Подтвердить что ты не робот

CSS white-space nowrap не увеличивает ширину?

Я перестраиваю выпадающее меню, похожее на поле <select>, используя div и jquery. Div, содержащий выпадающие элементы, должен иметь минимальную ширину, но не максимальную ширину, поскольку она должна расти вместе с самым широким элементом в списке (так что если у меня очень длинный элемент, например "[Это самый длинный элемент в контейнере]", весь контейнер должен быть таким же широким, как и эта запись.

Теперь я почти получил то, что хочу, используя white-space:nowrap для каждого элемента в контейнере, чтобы текст элемента не продолжался в новой строке. Проблема заключается в том, что текстовые потоки выходят из окна, вместо того, чтобы позволить коробке расти вдоль текста. Я не могу понять, как решить эту проблему. Я уже пробовал text-overflow:ellipsis, но похоже, что он просто скрывает переполненный текст и добавляет три точки (...) в конец.

Итак, вот моя проблема в двух словах: как я могу позволить div расти вместе с текстом внутри него, когда на него применяется white-space:nowrap, вместо того, чтобы пропускать текст из него? Я не хочу скрывать текст, используя overflow:hidden, я хочу показать всю строку.

Спасибо заранее!

4b9b3361

Ответ 1

Ширины элементов блока не зависят от их содержимого в обычной модели статического макета CSS. Вы можете получить "сжимаемое поведение" как часть других свойств макета:

  • float: left
  • position: absolute
  • display: inline-block
  • Таблица

если не указано явное width.

Ответ 2

У меня была аналогичная проблема, она была решена путем указания значения заполнения в px вместо процента.

Ответ 3

Существует ли максимальная ширина в любом из выбранных родительских элементов?

Это остановит работу белого пространства. display: таблица отменяет максимальную ширину, если она установлена.