嘿，我帮你搞定这个下拉菜单换行的问题！其实核心就是让菜单容器能自动“撑”到最长选项的宽度，同时不让选项内的文本换行。

你只需要给你的CSS做一点小修改就行：

.container { position: relative; width: 200px; }
.container > input { box-sizing: border-box; width: 100%; }
.menu { 
  position: absolute; 
  border: 1px solid blue; 
  padding: 2px;
  white-space: nowrap; /* 关键：阻止选项内文本换行 */
}
.item {
  display: block; /* 让每个选项单独占一行 */
  padding: 4px 8px; /* 可选优化：增大点击区域，更友好 */
}

原理说明： #

• white-space: nowrap 加到.menu上后，所有选项里的文本都会保持在一行，不会因为容器宽度不够而换行。这时候绝对定位的.menu会自动收缩包裹住最长的那个选项，自然就实现了水平自适应。
• display: block 给.item是为了让每个选项垂直排列，避免挤在同一行，这也是下拉菜单的常规样式。
• 额外加的padding是为了提升用户体验，让选项的点击区域更大，看起来也更舒服，你可以根据自己的需求调整数值。

如果遇到特别长的选项，不想让菜单宽得离谱，还可以给.menu加个max-width: 400px（数值自己定），再配上overflow-x: auto，这样超出宽度的部分会出现横向滚动条，兼顾自适应和布局合理性。

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