HTML中Input输入框Placeholder文本溢出问题求助

给你的input添加自定义样式，就能实现placeholder自动换行同时保持垂直居中，无需改用textarea：

修改后的HTML代码 #

<input
    class="form-control multiline-placeholder"
    style="width: 15rem; height: 15rem;"
    v-model="formData.booking_code"
    placeholder="Masukkan Kode Booking, contoh : XYBJLL"
/>

对应的CSS样式 #

.multiline-placeholder {
  /* 允许文本换行，保留换行符同时自动换行 */
  white-space: pre-wrap;
  /* 强制长单词换行，避免溢出 */
  word-break: break-word;
  /* 用flex布局实现内容垂直居中 */
  display: flex;
  align-items: center;
  /* 内边距防止文本贴边，同时盒模型计算包含内边距 */
  padding: 1rem;
  box-sizing: border-box;
}

/* 针对占位符元素单独设置换行规则，兼容不同浏览器 */
.multiline-placeholder::placeholder {
  white-space: pre-wrap;
  word-break: break-word;
  align-self: center;
}

原理说明 #

• white-space: pre-wrap 打破input默认的不换行规则，允许文本在容器边缘自动换行
• word-break: break-word 确保长单词或连续字符不会超出容器范围
• flex布局的align-items: center 轻松实现输入框内容（包括placeholder）的垂直居中，这是textarea很难简单实现的效果
• 加padding和box-sizing是为了让文本和输入框边缘保持合适距离，避免视觉拥挤

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