如何让选项下拉div自适应内容宽度（文本不换行）

要实现下拉框宽度自动适配最长选项且文本单行显示，你需要调整以下CSS设置：

1. 调整下拉列表的样式，取消固定宽度并强制单行显示
2. 确保下拉列表的定位不受容器宽度限制

修改后的完整CSS代码如下：

@import '~bootstrap/dist/css/bootstrap.min.css';

.my_choices_inner {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  padding: 0;
  margin-top: -2px;
  min-height: 44px;
  overflow: hidden;
}

.choices {
  margin-bottom: 0;
  position: relative; /* 为下拉列表的绝对定位提供基准 */
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
  white-space: nowrap; /* 强制文本单行显示，不换行 */
  width: auto; /* 让宽度自适应内容 */
  min-width: 100%; /* 确保下拉框至少和输入框一样宽 */
  position: absolute; /* 脱离父容器宽度限制，同时保持定位 */
  left: 0; /* 对齐输入框左侧 */
}

关键修改说明： #

• 移除了原有的word-break: break-word，避免文本被强制换行
• white-space: nowrap保证所有选项文本保持单行
• width: auto让下拉框根据最长选项的内容自动计算宽度
• min-width: 100%确保下拉框不会比上方的输入框更窄，兼顾视觉一致性
• 给.choices添加position: relative，让下拉列表的绝对定位相对于输入框容器，避免位置偏移

这样设置后，下拉框会自动适配最长选项的宽度，同时所有选项文本保持单行显示，不会出现换行或宽度被容器限制的问题。

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