Мобильная версияЯ использую vue-select с vee-validate в моем приложении Nuxt 3, но проблема в том, что когда текст выбранной опции слишком велик, то переходит на следующую строку, из-за чего общая высота поля увеличивается, чего я хочу избежать. Для выделенного текста, если текст опции не большой, то все работает нормально. Это происходит только для большого текста.
У меня есть следующий код:
импортировать {Значок} из "@iconify/vue"; импортировать {Field, ErrorMessage} из "vee-validate"; импортировать vSelect из «vue-select»; .vs__выпадающее меню, .vs__dropdown-option--disabled { @apply bg-white dark:bg-slate-800; } .vs__dropdown-опция, .vs__selected, .vs__search, .vs__dropdown-option--disabled { @apply text-primary dark:text-white; } .vs__dropdown-option--disabled { @apply шрифт-жирный текст-lg; } .vs__clear SVG { @apply вторичное заполнение; } .vs__open-индикатор { @apply вторичное заполнение; } Для текста меньшего размера поле выглядит примерно так:
Для большого текста поле выглядит примерно так:
Как мы видим, поле расширяется, когда текст большего размера, и когда я проверил вкладку проверки Chrome, я увидел, что смещается на следующую строку из-за большого текста, который я хочу избежать. Я хочу гарантировать, что это поле не будет расширяться.
Я попробовал добавить несколько стилей CSS Tailwind:
.vs__selected { дисплей: блок; пробел: nowrap; переполнение текста: многоточие; максимальная ширина: 100%; } Значки выходят за рамки:
