如何使自定义下拉框的.selected宽度匹配绝对定位的.options？如何禁止文本换行？

嘿，我来帮你搞定这两个自定义下拉框的布局问题！咱们一步步来解决：

问题1：让.selected元素宽度匹配.options元素宽度 #

因为.options是绝对定位，会脱离正常文档流，默认情况下.custom-select的宽度只会由.selected的内容撑开，导致两者宽度不一致。我们可以通过以下CSS调整实现宽度统一：

• 给.custom-select设置min-width: max-content，让容器宽度适配内部最宽元素的内容（也就是.options里最长的long-value）
• 给.selected设置width: 100%，让它占满.custom-select的宽度，自然就和.options宽度匹配了

问题2：让long-value文本保持单行不换行 #

只需要给.options里的每个选项设置white-space: nowrap，就能强制文本保持单行显示。如果担心超长文本溢出容器，还可以额外加上overflow: hidden和text-overflow: ellipsis来显示省略号（可选优化）。

修改后的完整代码 #

HTML（无需改动）

<div class="wrapper">
 <div class="description">Choose a value: </div>
 <div class="custom-select">
 <div class="selected">x</div>
 <div class="options">
 <div>a</div>
 <div>b</div>
 <div>c</div>
 <div>long-value</div>
 <div>e</div>
 </div>
 </div>
</div>

CSS

.wrapper { 
  display: flex; 
  align-items: center; 
  gap: 8px; /* 可选：增加描述和下拉框的间距，提升视觉体验 */
}
.description { }
.custom-select { 
  border: 1px solid black; 
  position: relative; 
  min-width: max-content; /* 关键：让容器宽度适配最宽内容 */
}
.selected { 
  width: 100%; /* 关键：占满容器宽度 */
  padding: 4px 8px; /* 可选：增加内边距，让点击区域更友好 */
}
.options { 
  position: absolute; 
  border: 1px solid black; 
  top: 100%; /* 可选：让下拉框紧贴选中框下方 */
  left: 0;
  right: 0; /* 让.options宽度和.custom-select完全一致 */
  background: white; /* 可选：添加背景色避免被下方内容覆盖 */
}
.options div {
  white-space: nowrap; /* 关键：强制文本单行显示 */
  padding: 4px 8px; /* 可选：增加内边距，提升选项点击体验 */
}

这样调整后，.selected就会和.options宽度完全匹配，同时long-value也会保持单行显示啦！

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