textarea原生placeholder不支持换行，因html规范将其视为纯文本、忽略换行符；可靠方案是用绝对定位div模拟或多行提示移至外部label。

HTML文本域（<textarea></textarea>）本身支持 placeholder 属性，但**原生 placeholder 不支持真正的换行显示**——哪怕你在属性值里写换行符或空格，浏览器也会把它当普通空格处理，最终渲染为一行连续文字。

为什么 placeholder 看起来“不换行”

因为：
• placeholder 是纯文本字符串，不解析 HTML 标签，也不识别 \n 或 <br>；
• 所有主流浏览器（Chrome、Firefox、Safari、Edge）都按单行文本渲染它，即使 <textarea></textarea> 本身能换行输入；
• iOS Safari 还会自动缩略过长的 placeholder（如显示“请输入…”，而非完整文案），且无法用 CSS 控制截断行为。

想实现视觉上的“多行提示”，推荐这几种实用方式

• 用浮动标签（floating label）模拟：在 <textarea></textarea> 外层套一个 <div>，里面放一个绝对定位的 <code><label></label> 或 <span></span>。用户聚焦或输入内容后，通过 JS 或 CSS 控制该提示文字上浮或隐藏。这是最语义清晰、无障碍友好、样式可控的做法。
• 放弃 placeholder，改用预设内容 + 清空逻辑：把提示文字直接写在 <textarea></textarea> 标签体内（不是 placeholder 属性），再用 JS 监听 focus 和 blur 事件——聚焦时清空，失去焦点且为空时恢复提示。注意要区分真实输入和初始占位，避免误删用户输入。
• 用 CSS 强制撑开 textarea 行高 + 长提示文案：虽然不能真正换行，但可设置 rows="4" 并搭配较长的提示句（如“请描述问题详情（包括发生时间、操作步骤、错误提示）”），靠自然断行和字体大小控制，在视觉上营造“分段感”。适合提示较短、无需严格对齐的场景。

哪些做法要避免

• 给 <textarea></textarea> 写 placeholder="第一行↵第二行" —— 换行符无效，多数浏览器显示为“第一行第二行”或空格连接；
• 用 white-space: pre-line 或 word-break 强行作用于 ::placeholder —— 无效果，伪元素不支持这类排版控制；
• 在 Vue/React 组件里只透传 placeholder prop，但没把它绑定到内部原生 <textarea></textarea> 上 —— 属性不会生效，属于常见封装疏漏。

正确写法示例（基础可用）

如果只是需要简洁提示，不用换行，直接这样写就足够：


html-ppt-to-pdf
将使用 `
` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。
下载

记得配 <label></label>，别依赖 placeholder 传递关键信息；样式调整统一用 ::placeholder 伪类，兼容前缀别漏掉。