textarea占位符代码内的缩进显示在html页面上

Question

我一直试图让占位符内的大文本缩进仅在代码内。但是当我尝试缩进它时，代码会将缩进作为引号内的文字获取。

<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 代码上有不成比例的大行，但这是为了上课，我现在很好奇。

Answer 1

不要在属性块和元素块中使用indent。因为一点空间也可以产生巨大的差异。

见下面的sn-pspan结尾后的换行符，在没有刹车的情况下产生空间差异。

在元素结束后或<> 处中断更安全（但并非在所有情况下都适用，例如text-area 在<> 之后中断不会显示占位符）箭头，因为有时空间很重要

 <div>
<span>1</span>
<span>2</span>
</div>

<div>
<span>1</span><span>2</span>
</div>

span ::after 之间的空格不适用于下面 sn-p 中的样式

div span ::after {
  content: "";
  display: block;
  margin: 30px auto 30px;
  width: 20%;
  border-bottom: solid 2px #5d9cd4;
}

.second span::after {
  content: "";
  display: block;
  width: 20%;
  border-bottom: solid 2px #5d9cd4;
}

<div>
  <span>1</span>
  <span>2</span>
</div>

<div class="second">
  <span>1</span>
  <span>2</span>
</div>

所以不要在中间使用不必要的空格

<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>