前端开发小技巧 - 【CSS】- 表单控件的 placeholder 如何控制换行显示？

表单控件的 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="第一行&#10;第二行"></textarea>
  

使用 title 属性

• 如果上述方法都不适用，你可以考虑使用 title 属性来显示多行文本提示。

  <textarea title="第一行 第二行"></textarea>
  

• 请注意，不同浏览器对这些方法的支持程度可能有所不同，因此在实际应用中需要进行兼容性测试。