ReactJS 自定义multidropdown组件输入框文本遮挡图标问题求解

解决方案 #

你可以通过两种常见的CSS布局方案解决该问题：

方案1：Flex布局（更推荐，适配性更强）

将输入框容器拆分为文本区和图标区两个独立模块，通过flex属性控制区域占比，从根源上避免内容重叠：

• 输入框外层容器设置display: flex，垂直对齐设为居中
• 文本区域设置flex: 1，自动占满剩余可用宽度，同时加上overflow-wrap: break-word实现长文本自动换行
• 图标区域设置flex-shrink: 0，保证图标不会被文本挤压变形/覆盖
  示例代码：

/* 外层输入框容器 */
.multidropdown-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  min-height: 36px;
  box-sizing: border-box;
}
/* 文本展示/输入区域 */
.multidropdown-content {
  flex: 1;
  overflow-wrap: break-word;
  word-break: break-all;
  line-height: 1.5;
}
/* 图标容器 */
.multidropdown-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

方案2：绝对定位+预留内边距

如果你的组件现有结构不好拆分模块，可以用绝对定位固定图标位置，同时给文本区域预留足够的右侧内边距：

• 输入框容器设置position: relative
• 图标设置position: absolute固定在右侧垂直居中位置
• 输入框容器设置padding-right，数值为图标宽度加左右留白间距，保证文本不会触达图标区域
  示例代码：

.multidropdown-input {
  position: relative;
  padding: 6px 40px 6px 12px; /* 右侧预留32px空间放置20px宽的图标 */
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  overflow-wrap: break-word;
  box-sizing: border-box;
}
.multidropdown-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
}

如果是可输入的输入框，还需要给原生input标签或者contenteditable元素同步设置对应的内边距，避免输入光标跑到图标区域。

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