如何限制输入框文本内容不超出输入框范围？

针对你提供的任务管理表单，当#task-title输入框输入大量字符时文本溢出的问题，有以下几种实用解决方案：

方案1：单行输入，超出时显示水平滚动条 #

这种方案保持输入框为单行，文本过长时允许用户滚动查看全部内容，适合需要保持布局紧凑的场景。

添加以下CSS代码：

#add-task-form {
  display: flex;
  gap: 0.5rem; /* 输入框与按钮的间距，可按需调整 */
}

#task-title {
  flex: 1; /* 让输入框占满表单剩余空间 */
  overflow-x: auto;
  white-space: nowrap; /* 强制文本单行显示 */
  padding: 0.5rem; /* 可选，优化输入体验 */
}

方案2：改用多行文本框（适合长任务描述） #

如果需要支持多行输入，直接将<input>替换为<textarea>，天然支持自动换行和滚动，更适配长文本场景。

修改后的HTML代码：

<form action="" id="add-task-form">
  <textarea id="task-title" placeholder="What do you need to do?" rows="1"></textarea>
  <button id="add-btn" type="submit" >
    <ion-icon name="add-outline"></ion-icon>
  </button> 
</form>

配套CSS代码：

#add-task-form {
  display: flex;
  gap: 0.5rem;
}

#task-title {
  flex: 1;
  min-height: 2.2rem; /* 保持初始高度与原输入框一致 */
  resize: vertical; /* 允许用户垂直调整文本框高度 */
  overflow-y: auto;
  padding: 0.5rem;
}

方案3：限制最大输入长度 #

如果不需要支持超长文本，可直接给输入框添加maxlength属性，从根源限制输入字符数，避免溢出。

修改后的HTML代码：

<input type="text" id="task-title" placeholder="What do you need to do?" maxlength="200">

配套CSS优化布局：

#add-task-form {
  display: flex;
  gap: 0.5rem;
}

#task-title {
  flex: 1;
  padding: 0.5rem;
}

内容的提问来源于stack exchange，提问作者José Miguel