TagInput长文本标签溢出时删除按钮不可见问题求解

问题背景 #

项目中使用TagsInput标签输入组件，当前业务场景下用户输入内容为链接。因链接普遍长度较长，为避免页面容器被长内容过度拉伸，已通过white-space: nowrap样式实现标签文本不换行效果。
组件要求支持删除已添加标签，现有实现存在以下问题：短链接标签下删除功能正常，长链接标签下，位于标签文本末尾的叉形删除按钮会随长文本溢出被隐藏，用户无法看到并点击。预期效果为长标签文本自动省略截断，删除按钮始终保持在可视区域内，保障长链接标签可正常删除。

现有实现代码 #

原有.tag类样式 #

.tag {
    display:flexbox;
    /* align-items: center; */
    margin: 5px 0;
    margin-right: 5px;
    padding: 0 5px;
    border: 1px solid black;
    border-radius: 5px;
    color: black;
    overflow:hidden;
    text-overflow: ellipsis;
    max-width: fit-content;
    white-space: nowrap;
}

原有React组件逻辑 #

...
const deleteTag = (index) => {
    setTags(prevState => prevState.filter((tag, i) => i !== index))
}

return (
    <div className={classes.container}>
        {tags.map((tag, index) => <div className={classes.tag}>
            {tag}
            <ClearIcon className={classes.del} fontSize="small" onClick={() => deleteTag(index)} />
        </div>
        )}
        <input
            className={classes.input}
            value={input}
            placeholder={props.inputPlaceholder}
            onKeyDown={onKeyDown}
            onKeyUp={onKeyUp}
            onChange={onChange}
        />
    </div>);
}

修复步骤 #

1. 调整标签DOM结构 #

将标签内的纯文本内容单独用<span>标签包裹，和删除按钮拆分为两个独立的flex子元素：

{tags.map((tag, index) => <div className={classes.tag}>
    <span className={classes.tagText}>{tag}</span>
    <ClearIcon className={classes.del} fontSize="small" onClick={() => deleteTag(index)} />
</div>)}

2. 调整对应样式 #

修正父容器的flex布局配置，将文本溢出省略规则迁移到单独的文本容器上，给删除按钮添加禁止收缩属性：

.tag {
    /* 改用标准flex布局，开启垂直居中 */
    display: flex;
    align-items: center;
    margin: 5px 0;
    margin-right: 5px;
    padding: 0 5px;
    border: 1px solid black;
    border-radius: 5px;
    color: black;
    overflow: hidden;
    /* 替换fit-content，设置标签最大宽度，可根据业务场景调整数值 */
    max-width: 280px;
}

.tagText {
    /* 文本不换行、溢出省略规则放在文本容器上 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.del {
    /* 核心配置：禁止删除按钮被flex布局压缩，始终保留显示空间 */
    flex-shrink: 0;
    /* 可选配置：增加左侧边距，和文本拉开间距 */
    margin-left: 6px;
    cursor: pointer;
}

实现原理 #

原有问题的核心原因是溢出省略规则直接加在了父容器上，长文本作为flex子元素默认会抢占所有空间，把删除按钮挤到溢出区域一起隐藏。
调整后：

• 父容器设置固定最大宽度，作为flex容器给两个子元素分配空间
• 文本容器作为可收缩项，内容超长时自动触发省略号截断
• 删除按钮设置flex-shrink: 0后，不会被压缩，始终占据固定宽度显示在标签末尾

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