如何仅在HTML代码中缩进textarea的placeholder文本而不在页面显示缩进？

这问题我之前也碰到过！想让代码保持整洁的缩进格式，又不想让这些缩进变成placeholder里的字面内容显示在页面上，确实有点头疼，不过有几个实用的办法可以解决：

方法1：用JavaScript动态设置placeholder #

这是我最推荐的方案，既能让代码里的文本随意换行缩进，又能确保页面上的placeholder完全干净。思路是把placeholder文本放在JavaScript的模板字符串里，然后通过代码设置给textarea，同时处理掉多余的换行和空格：

<div> 
  <textarea name="details" required id="details" class="largeText"></textarea> 
</div>

<script>
  // 模板字符串里可以随意换行缩进，完全不影响最终显示
  const placeholderText = `
    The student claimed that he/she is the reincarnation of Don Quixote de La Mancha
    and attacked the Instructor claiming that the later resembled a giant.
  `;
  // trim()去掉首尾空白，replace把所有连续空白换成单个空格
  document.getElementById('details').placeholder = placeholderText.trim().replace(/\s+/g, ' ');
</script>

这样写的话，你的HTML代码结构会非常整洁，而页面上的placeholder会显示成连贯的单行文本，没有任何多余缩进。

方法2：HTML属性内拆分文本但避免缩进 #

如果你不想用JavaScript，也可以直接在HTML里把placeholder文本拆成多行，但要注意第二行及以后的文本开头不要加缩进，浏览器会把属性内的换行自动转换成单个空格，最终显示的文本是连贯的：

<div> 
  <textarea name="details" required id="details" class="largeText" 
    placeholder="The student claimed that he/she is the reincarnation of Don Quixote de La Mancha
and attacked the Instructor claiming that the later resembled a giant."> 
  </textarea> 
</div>

这个方法的缺点是代码的对齐感稍差，但胜在不需要额外的脚本，适合纯HTML场景。

为什么直接缩进会有问题？ #

HTML属性值里的空白字符（包括空格、换行、制表符）都会被浏览器当作字面内容保留，除非是连续的空格会被合并成一个。所以你在代码里给placeholder文本加的缩进，都会原封不动地出现在页面的placeholder里——这就是你遇到问题的根源啦。

内容的提问来源于stack exchange，提问作者Marcus Arnhold