如何调整bootstrap-select下拉框宽度并实现长文本换行？

我在项目中使用bootstrap-select组件时，遇到下拉选项包含较长文本的情况，下拉菜单宽度会超出select元素本身的宽度。相关基础代码如下：

<select class='selectpicker form-control'>
    <option>...</option>
    <option>...</option>
<select>

完整示例代码：

<!DOCTYPE html>
<html>
<head>
  <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css' rel='stylesheet'>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css'>
</head>

<body>
  <div class='col-5'>
    <select class='selectpicker form-control' data-selected-text-format="count" multiple>
      <option>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur iure. </option>
      <option>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur iure. </option>
      <option>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur iure. </option>
    </select>
  </div>

  <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js'></script>
</body>
</html>

目前我已经通过自定义CSS实现了选项文本换行：

.bootstrap-select .dropdown-menu .dropdown-item { 
    white-space: normal; 
} 

对应的完整示例：

.bootstrap-select .dropdown-menu .dropdown-item {
  white-space: normal;
}

<!DOCTYPE html>
<html>
<head>
  <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css' rel='stylesheet'>
  <link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css'>
</head>
<body>
  <div class='col-5'>
    <select class='selectpicker form-control' data-selected-text-format='count' multiple>
      <option>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur iure. </option>
      <option>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur iure. </option>
      <option>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, aspernatur iure. </option>
    </select>
  </div>
  <script src='https://code.jquery.com/jquery-3.6.0.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js'></script>
  <script src='https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js'></script>
</body>
</html>

想请教：有没有更优的实现方式？bootstrap-select或Bootstrap中是否有内置类可以直接实现该效果？

1. 内置类现状 #

Bootstrap和bootstrap-select目前没有专门用于实现下拉选项文本换行的内置类。bootstrap-select默认样式中，.dropdown-item的white-space属性被设置为nowrap，这正是长文本不换行、导致菜单过宽的原因。

2. 更优实现建议 #

你当前的自定义CSS方案已经是直接高效的核心解决方式，可基于不同场景做细节优化：

• 限定作用范围：如果仅需特定select组件生效，可给目标select添加自定义类（比如wrap-options），缩小CSS影响范围：

  .bootstrap-select.wrap-options .dropdown-menu .dropdown-item {
      white-space: normal;
  }
  

  对应HTML：

  <select class='selectpicker form-control wrap-options' data-selected-text-format='count' multiple>
    <!-- 选项内容 -->
  </select>
  

• 控制菜单最大宽度：若希望下拉菜单宽度不超过select元素，可额外添加max-width限制：

  .bootstrap-select .dropdown-menu {
      max-width: 100%;
  }
  .bootstrap-select .dropdown-menu .dropdown-item {
      white-space: normal;
  }
  

3. 其他可选方案 #

根据业务场景，还可以选择以下替代方式：

• 文本截断+hover显示完整内容：适合不希望菜单高度增加的场景，hover时展示完整文本：

  .bootstrap-select .dropdown-menu .dropdown-item {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .bootstrap-select .dropdown-menu .dropdown-item:hover {
      overflow: visible;
      white-space: normal;
  }
  

• 配合滚动条优化：使用bootstrap-select的data-size属性控制下拉菜单高度，通过滚动条浏览选项，但仅能优化高度问题，无法解决宽度超出。

总的来说，你最初的自定义CSS方案已经是解决该问题的核心方式，上述优化仅为适配不同业务场景的补充。

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