表单控件的 placeholder 如何换行展示？
- HTML 中，
<textarea>元素的placeholder属性默认情况下不支持换行。 - 不过，可以通过以下几种方法来实现换行效果：
模版字符串
-
模板字符串可以轻松地创建多行字符串，而不需要使用换行符
\n。const message =
这是一个多行字符串。 可以方便地包含换行。
console.log(message)
使用 CSS
-
可以使用 CSS 来模拟换行效果。
-
通过设置
white-space: pre-wrap;和word-wrap: break-word;可以让placeholder文本换行。textarea::placeholder {
white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 /
word-wrap: break-word; / 在长单词或 URL 地址内部进行换行 */
}
使用 JavaScript
-
可以通过 JavaScript 动态地设置
placeholder，并在其中包含换行符\n。不过，这种方法在某些浏览器中可能不被支持。document.querySelector('textarea').setAttribute('placeholder', '第一行\n第二行');
使用 HTML 实体
- 可以使用 HTML 实体
或 来表示换行符，但这在placeholder中可能不会生效。
<textarea placeholder="第一行 第二行"></textarea>使用 title 属性
-
如果上述方法都不适用，你可以考虑使用
title属性来显示多行文本提示。 -
请注意，不同浏览器对这些方法的支持程度可能有所不同，因此在实际应用中需要进行兼容性测试。