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 中用 （即 HTML 实体 ，等价于 ）插入换行 —— 不能用

  <br>

  ，也不能只敲回车（HTML 源码换行会被空格合并）
• CSS 中必须设置 textarea::placeholder { white-space: pre-wrap; }，否则换行符无效
• 建议同时设 rows 或 min-height，避免 placeholder 被截断

示例：

立即学习“前端免费学习笔记（深入）”；

<textarea
  placeholder="请输入内容&#10;• 支持多行输入&#10;• 每行不超过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 配合，而不是强行撑高容器。