通过绝对定位叠加层模拟可换行占位符，用 替代原生 placeholder 属性，支持自动折行、垂直居中与样式自定义，同时保持 的原生行为与对齐特性。
通过绝对定位叠加层模拟可换行占位符，用 `` 替代原生 `placeholder` 属性，支持自动折行、垂直居中与样式自定义，同时保持 `` 的原生行为与对齐特性。
在 HTML 表单开发中，原生 <input> 元素的 placeholder 属性不支持换行（white-space: pre-wrap 无效），且当输入框高度较大、占位文本较长时，文字会被截断或溢出，影响可读性与用户体验。若直接改用 <textarea></textarea>，虽支持多行，但会丧失 <input type="text"> 的垂直对齐能力（如与按钮、标签等内联元素难以对齐），也不符合语义化要求（如仅需单行输入）。
此时推荐采用「视觉模拟占位符」方案：使用一个带样式的 <span></span> 元素覆盖在 <input> 上方，通过 CSS 精确控制其位置、换行与显示逻辑。核心要点如下：
✅ 结构封装：将 <input> 和 <span></span> 包裹在 .input-wrapper 容器中，启用 position: relative 作为定位上下文；
✅ 层级控制：<input> 设置 position: absolute; z-index: 2; background: transparent，确保用户可交互且不遮挡占位文本；
✅ 占位文本样式：.placeholder 使用 position: absolute; z-index: 1; white-space: pre-wrap; overflow: hidden; display: flex; align-items: center，实现自动换行 + 垂直居中；
✅ 状态联动：需配合 JavaScript 或框架指令（如 Vue 的 v-if/:class）动态控制占位文本显隐——当 input 有值或获得焦点时隐藏占位符。
示例完整代码（Vue 场景）：
<div class="input-wrapper">
<input class="form-control" style="width: 15rem; height: 3rem;" v-model="formData.booking_code" false id="bookingCodeInput"><span v-if="showPlaceholder" class="placeholder">
Masukkan Kode Booking, contoh: XYBJLL
</span>
</div>
.input-wrapper {
position: relative;
width: 15rem;
height: 3rem;
}
.form-control {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
background: transparent;
border: 1px solid #ced4da;
border-radius: 0.375rem;
padding: 0.5rem;
font-size: 1rem;
}
.placeholder {
position: absolute;
top: 0;
left: 0;
z-index: 1;
color: #aaa;
padding: 0.5rem;
pointer-events: none;
white-space: pre-wrap;
overflow: hidden;
width: 100%;
height: 100%;
display: flex;
align-items: center;
line-height: 1.4;
}
⚠️ 注意事项：
- 避免为
.form-control设置background-color: white（否则会遮盖占位符），建议用透明背景 + 外层容器控制样式； - 若需支持 IE，
white-space: pre-wrap可降级为word-wrap: break-word并配合overflow-wrap: break-word； - 在表单重置（
reset()）或初始值非空时，务必同步更新showPlaceholder状态； - 如项目使用 Tailwind CSS，可直接用
absolute inset-0,flex items-center p-2 text-gray-400等工具类快速实现。
该方案兼顾语义正确性、视觉一致性与交互完整性，是解决长占位文本溢出问题的专业级实践。
