水平溢出时隐藏的引导多选选项文本答案

【问题标题】：Bootstrap multi-select option text hidden when overflow horizontal水平溢出时隐藏的引导多选选项文本
【发布时间】：2020-05-07 23:27:56
【问题描述】：

我尝试使用引导程序创建一个只有一个水平滚动条的多选，我不想让每个选项都有一个水平滚动条。

当我选择最长的选项 (123456789012345678901234567890) 时，仅突出显示了该选项文本的一部分，我可以看到该选项文本的其余部分未被选中，并且通过向右滚动将其隐藏。我该如何解决这个问题？

<div class="row w-50">
<div class="col">
    <select multiple class="custom-select d-inline overflow-auto s1">
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>

这是我到目前为止所做的：https://jsfiddle.net/sxb2tk97/

使用 chrome 测试。

如果我用safari，连水平滚动条都看不到，有没有更好的方案可以满足所有主流浏览器？

【问题讨论】：

从来没有一个统一的方法（或一组方法）来设置<select> + <option> 标签的样式始终跨浏览器。这就是为什么每个选择插件或库都隐藏<select> 并呈现<div>s（或<ul>s，或<span>s）。

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

我通过将选择元素包装在容器中，使容器可滚动并删除引导程序的选择类样式来解决此问题。它适用于 chrome，但不适用于 safari。

.s1 {
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  vertical-align: middle;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  -webkit-appearance: none;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<div class="row">
<div class="col-3 overflow-auto">
  <select multiple class="s1">
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>123456789012345678901234567890</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
</div>
</div>

【讨论】：