如何限制支持标签的自定义输入元素宽度并实现垂直扩展？

算力阿峰

2026-6-26

解决方案

要实现类似Stack Overflow的标签输入组件，让容器能自动换行扩展高度且输入框不会过早换行，只需调整CSS并优化布局逻辑，以下是修改后的完整代码：

HTML

<div class="container">
  <div id="tags" class="tags">
    <input type="text" placeholder="输入标签后按空格添加">
  </div>
</div>

CSS

.container {
  width: 200px;
}

.tags {
  border: 1px solid #777;
  border-radius: 4px;
  display: flex;
  flex-wrap: wrap; /* 允许元素换行 */
  padding: 0.5rem;
  gap: 0.3rem; /* 标签和输入框之间的间距，替代margin更简洁 */
}

.tags > input {
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0.3rem 0.5rem;
  flex: 1 1 auto; /* 自适应剩余空间，不强制占满整行 */
  min-width: 120px; /* 设置最小宽度，避免输入框过窄 */
}

.tags > button {
  background-color: #e1ecf4;
  border: 1px solid #7aa7c7;
  border-radius: 3px;
  color: #39739d;
  padding: 0.3rem 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.tags > button:hover {
  background-color: #b3d3ea;
}

JavaScript

const input = document.querySelector('.tags > input');

input.addEventListener('keyup', e => {
  const container = input.parentNode;
  
  if (e.key === ' ' && input.value.trim().length > 0) {
    const button = document.createElement('button');
    button.innerText = input.value.trim();
    
    // 给标签添加删除功能，更贴近SO体验
    button.addEventListener('click', () => {
      container.removeChild(button);
    });
    
    container.insertBefore(button, input);
    input.value = '';
  }
});