使用flex布局避免下拉菜单内同一行选项重叠、拆行显示

解决方案 #

只需给外层容器增加flex布局相关规则，同时给选项添加不折行属性即可实现需求，调整后的代码如下：

修改后的CSS代码 #

.dropdown {
  top: 100%;
  /* 可根据需求保留原有max-width限制，或改为fit-content实现下拉宽度自适应内容 */
  max-width: fit-content;
  white-space: normal;
  padding: 0.5rem 0rem;
  margin: 0.125rem 0rem 0rem;
  border: 1px solid grey;
}

.options-wrapper {
  margin-left: 16px;
  margin-bottom: 8px;
  /* 新增flex布局规则 */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.option {
  padding: 8px;
  background-color: black;
  color: white;
  min-width: 120px;
  /* 新增文本不折行规则 */
  white-space: nowrap;
}

调整说明 #

• 给.options-wrapper添加display: flex启用flex布局，搭配flex-wrap: wrap实现选项满行后自动换行，gap属性控制选项之间的固定间距，避免选项拥挤
• 给.option添加white-space: nowrap，强制单个选项内的文本始终在同一行显示，不会被拆分到两行
• 可根据业务场景选择是否调整.dropdown的max-width属性，改为fit-content后下拉框宽度会随选项数量自动适配

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