如何为HTML的Select组件添加横向滚动条

Got it! The issue here is that native select elements (especially when using size to create a multi-line list) wrap long text by default, making it tough to read full option content at a glance. Here's a straightforward fix to add a horizontal scrollbar so users can view the complete text:

Step 1: Wrap the Select in a Scrollable Container #

First, we'll wrap your existing <select> in a div that handles the scroll behavior. Then we'll add custom CSS to prevent text wrapping and adjust the layout.

Modified Code #

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="select-scroll-container">
  <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>
</div>

CSS

.select-scroll-container {
  overflow-x: auto;
  /* Match Bootstrap's form-control styling */
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.select-scroll-container select.form-control {
  white-space: nowrap; /* Prevent text wrapping */
  width: auto; /* Allow select to expand to fit long text */
  min-width: 100%; /* Ensure select doesn't shrink below container width */
  border: none; /* Remove default border to avoid double lines */
  border-radius: 0;
}

How This Works #

• Scroll Container: The .select-scroll-container div creates a boundary where horizontal scrolling activates when the select inside is wider than the container.
• No Text Wrapping: white-space: nowrap forces all option text to stay on a single line.
• Dynamic Width: width: auto lets the select expand to fit the longest option, while min-width: 100% keeps it full-width when options are short.
• Bootstrap Compatibility: We adjust borders and radii to match Bootstrap's default form styles so the result looks cohesive.

This solution works across all modern browsers and integrates seamlessly with your existing Bootstrap setup.

内容的提问来源于stack exchange，提问作者sergioBertolazzo