textarea placeholder不能直接换行，因其属性值为纯文本，浏览器会忽略或压缩 等换行符；唯一规范支持方案是html中用 插入换行并配合css的white-space:pre-wrap声明。
textarea placeholder 为什么不能直接换行
因为 placeholder 属性值是纯文本，浏览器会把其中的
、
或
<br>当作普通字符或忽略处理，不会渲染成换行。你写
placeholder="第一行
第二行"，实际显示仍是一行挤在一起的文本。
用 CSS 的 ::placeholder 配合 white-space 实现换行
这是最轻量、兼容性足够（Chrome 57+、Firefox 51+、Safari 10.1+）的方案：让占位符文本尊重换行符，并控制容器高度适配。
关键点：
- HTML 中用
<br>
，也不能只敲回车（HTML 源码换行会被空格合并） - CSS 中必须设置
textarea::placeholder { white-space: pre-wrap; }，否则换行符无效 - 建议同时设
rows或min-height，避免 placeholder 被截断
示例：
<textarea placeholder="请输入内容
• 支持多行输入
• 每行不超过20字" rows="4"></textarea><style>
textarea::placeholder {
white-space: pre-wrap;
color: #999;
}
</style>
JavaScript 动态插入换行符时要注意编码
如果 placeholder 是 JS 动态设置的（比如从接口取文案），必须用
字符，且确保 DOM 设置方式正确：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
el.placeholder = "第一行 第二行"✅（JS 字符串换行有效） - 用
el.setAttribute('placeholder', '第一行 第二行')❌（部分老浏览器会丢失换行） - 服务端返回 JSON 时，确保
没被转义成
\n，否则变成字面量
验证方法：打印 console.log(el.placeholder)，看到换行符是否真实存在。
不推荐用伪元素模拟 placeholder 的原因
有人用 textarea + label 或 textarea::before 叠加文字来“模拟”多行 placeholder，但问题明显：
- 焦点获取后需手动隐藏，容易遗漏或时机错乱
- 无法响应
textarea原生的placeholder样式逻辑（如禁用状态变色） - 屏幕阅读器可能读不到或重复读取
- 移动端软键盘弹起时，定位容易偏移
除非要支持 IE11 或更老环境，否则没必要绕开原生 placeholder。
真正麻烦的是 placeholder 文本长度不可控时的溢出和截断 —— 这时候得靠 overflow: hidden 和固定 rows 配合，而不是强行撑高容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
