html - 如何在选择框

Question

我在html中选择了问题，我需要一个水平滚动条让用户看到所有文字。

我有什么：

我需要什么：

我的代码：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

将overflow-x: auto或scroll添加到CSS

＆＃13;

＆＃13;

select {
  overflow-x: auto;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

overflow-x和overflow-y

overflow-x和overflow-y属性指定是否只是水平或垂直（或两者）更改内容溢出：

overflow-x指定如何处理内容的左/右边缘。

overflow-y指定如何处理内容的上/下边缘。

＆＃13;

＆＃13;

select{
overflow-x:auto;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

添加

GOMIPS=softfloat

Answer 4

您可以先设置固定的高度和宽度，然后如果它溢出固定的宽度和高度，则会出现滚动条。您可以通过设置overflow-x and overflow-y to scroll.

来完成此操作

.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>

Answer 5

所有提供的答案都存在严重的可用性问题：它们允许双垂直侧边栏或垂直和水平侧边栏，这使得元件难以在许多设备上使用。

良好的用户体验是只允许每个元素滚动一个方向并避免使用双滚动条：

a）仅允许水平滚动：

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);
  })
})

＆＃13;

＆＃13;

$(window).on('load', function(){
  $('select[size]').each((i,e) => {
    $(e).attr('size', $(e).children().length + 1);
  })
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

b）仅允许垂直滚动（换行选项）：

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

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;