TagsInput组件如何实现短标签单行显示且长标签不溢出模态框

你现在遇到的长标签溢出、省略号不生效问题，核心是两个样式写法错误：

1. display: flexbox是无效属性值，标准flex布局的正确display值是flex
2. max-width: fit-content会让标签宽度完全由内容决定，父容器的宽度约束无法对其生效，自然会撑出模态框边界，文本截断规则也不会触发

按以下步骤修改即可实现预期效果：

• 首先给所有标签的父容器（即TagsInput组件的输入区域）加上布局和宽度约束，确保容器本身不会超出模态框：

.tags-input-wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  /* 原有输入框的边框、内边距等样式保留即可 */
}

• 修正原有.tag类的样式，移除错误属性，补充flex收缩规则：

.tag {
    display: flex;
    align-items: center;
    margin: 3px 2px;
    padding: 0 6px;
    border: 1px solid black;
    border-radius: 5px;
    color: black;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    /* 替换fit-content，允许标签在空间不足时收缩 */
    max-width: calc(100% - 12px);
    min-width: 0;
}

• 如果组件inline模式默认给标签加了固定宽度或者不收缩的flex属性，额外加一行覆盖即可：

.tag {
  flex: 0 1 auto;
}

调整后的效果：短标签会按自身内容宽度自适应，在容器内单行排列、自动换行；长标签到达容器宽度阈值后会自动触发文本省略，不会溢出模态框边界。如果觉得长标签截断的阈值不合适，直接修改max-width的值即可，比如设为max-width: 180px就能让所有标签最长不超过180px。

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