Select, выпадающий список, слишком длинный текст, как сделать перенос?

Всем привет.
Кто подскажет как реализовать нормально отображение выпадающего селект списка, слишком длинный текст и вылезает за рамки самой формы селекта, на 2 строку не переноситься текст, как можно это исправить?

Рабочий пример: https://jsfiddle.net/80aoervL/1/

Хотелось бы чтобы текст за красную рамку не выпадал, а переносился на вторую или третью строку если вариант длинный.
При адаптации сайта, текст тупо не переноситься, а просто точки, скрин ниже.

5ecf5fbf41b10984290413.png
  • Вопрос задан
  • 172 просмотра
Решения вопроса 1
sniggering_deus
@sniggering_deus Куратор тега CSS
I will live forever in the flame of your eyes.
С помощью CSS на это никак не получится повлиять. Возможно только если пытаться с помощью JS делать обрезку по символам, сокращая тем самым количество символов и создавать всплывающие тултипы при наведении на option, но это костыль. Нативный <select> & <option> так и так практически не имеют возможности к настройке, поэтому будет правильным решением сделать Dropdown компонент с помощью JS и настроить внешний вид используя CSS.

Кстати на stackoverflow есть несколько решений, но опять таки это Хаки, а не чистые решения.

Например можно сделать вот такой кастомный select с возможностью стилизации, добавлением функций и так далее:

Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы