Html - как прокручивать по вертикали в поле выбора

У меня проблема с выбором в html, мне нужна горизонтальная полоса прокрутки, чтобы пользователь мог видеть весь текст.

Что у меня есть:

Html - как прокручивать по вертикали в поле выбора

Что мне нужно: Html - как прокручивать по вертикали в поле выбора

Мой код:

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel = "stylesheet"/>

<select size = "12" class = "form-control">
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
</select>

где твой CSS?

— Kunal Mukherjee 11.05.2018 20:18
html css
11.05.2018 20:17
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
1
64
6
Перейти к ответу Данный вопрос помечен как решенный

Ответы 6

Добавить overflow-x: auto или scroll в CSS

select {
  overflow-x: auto;
}
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel = "stylesheet" />

<select size = "12" class = "form-control">
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
</select>
11.05.2018 20:20
Ответ принят как подходящий

переполнение-x и переполнение-y

Свойства overflow-x и overflow-y указывают, следует ли изменять переполнение содержимого только по горизонтали или вертикали (или и то, и другое):

overflow-x указывает, что делать с левым / правым краями содержимого.

overflow-y указывает, что делать с верхним / нижним краями содержимого.

select{
overflow-x:auto;
}
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel = "stylesheet" />

<select size = "12" class = "form-control">
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
</select>

Это работает в CHROME и FIREFOX, но не работает в IE ... есть идеи?

— sergioBertolazzo 14.05.2018 16:22
11.05.2018 20:23

Добавлять

 select {
     overflow-x: scroll;
 }
11.05.2018 20:24

Сначала вы можете установить фиксированную высоту и ширину, а затем, если они выходят за пределы фиксированной ширины и высоты, появится полоса прокрутки. Вы можете сделать это, установив overflow-x и overflow-y для прокрутки.

.selectItems
{
  width: 800px;
  overflow-x: scroll;
  height: 600px;
  overflow-y: scroll;
  
}
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel = "stylesheet" />

<div class = "selectItems">
  <select class = "form-control">
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
    <option>Acompanhamento Orçamentário Ajustes orçamentário - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
  </select>
</div>
11.05.2018 20:25

Добавить к элементу атрибут переполнение: авто

11.05.2018 20:27

Все предоставленные ответы имеют серьезную проблему с удобством использования: они допускают либо двойные вертикальные боковые панели, либо вертикальные и горизонтальные боковые панели, что затрудняет использование элемента на ряде устройств.

Хороший пользовательский интерфейс - разрешить только одно направление прокрутки для каждого элемента и избежать двойных полос прокрутки:

а) разрешить только горизонтальную прокрутку:

select {
  overflow-x:auto;
  overflow-y: hidden;
}

/*
 * sets select size to children + 1, 
 * to render vertical scrolling unnecessary:
 */
$(window).on('load', function(){
  $('select[size]').each((i,e) => {
    $(e).attr('size', $(e).children().length + 1);
  })
})


$(window).on('load', function(){
  $('select[size]').each((i,e) => {
    $(e).attr('size', $(e).children().length + 1);
  })
})
select {
  overflow-x:auto;
  overflow-y: hidden;
}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel = "stylesheet"/>

<select size class = "form-control">
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
</select>

б) разрешить только вертикальную прокрутку (варианты обтекания):

select {
  overflow-y: auto;
}
option {
  white-space: initial;
}


select {
  overflow-y: auto;
}
option {
  white-space: initial;
}
<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel = "stylesheet"/>

<select size = "12" class = "form-control">
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
<option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option><option>Acompanhamento Orçamentário Ajustes orçamentário  - Visão Gestor e Segmentos/Acompanhamento de Segmentos e Produtos Ajustar o orçamento quando há alterações no orçamento vigente</option>
</select>
11.05.2018 20:44

Другие вопросы по теме

Событие Onclick внутри всплывающего окна начальной загрузки
Css / html работает с локальным файлом, а не с jsfiddle или codepen
Измените анимацию модального окна начальной загрузки при нажатии кнопки закрытия, чтобы сдвинуть его влево
Есть ли способ привязать элемент к левому и правому краю контейнера, чтобы он растягивался, чтобы заполнить этот контейнер?
Заставить элемент заполнять ширину своего контейнера И не иметь полей, выталкивающих его из этого контейнера?
: перед "формой", содержащейся в div css - без переполнения
Как выровнять текст внутри строки сетки и столбца сетки без потери границ?
Почему Internet Explorer не обрабатывает один и тот же код согласованным образом?
По центру и по левому краю - Bootstrap
Knitr: экспорт в файл html, но с сохранением стиля

Похожие вопросы

Метатег Viewport не работает - отзывчивый сайт
Проблемы Buffalo v0.11.0 с flash и application.html?
Отображение содержимого из файла XML с помощью XSLT
Строка Javascript в записи документа msgwindow
Как показать текст абзаца с помощью JavaScript, включая теги <p>?
Событие Onclick внутри всплывающего окна начальной загрузки
Css / html работает с локальным файлом, а не с jsfiddle или codepen
Как читать и понимать ошибки парсера шаблонов angular
Как заставить преобразование перевода начинаться с элемента?
Как добавить два существующих элемента в div?