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

Answer 1

不要在属性块内使用 indent，有时也不要在元素内使用。因为一点点 space 也可以产生巨大的差异。

在下面的代码片段中看到 span 结束后的一个换行符在没有刹车时 space 有所不同。

It is safer to break after the end of element or at <>(but not applied in all cases like in text-area breaking after <> will not display place-holder) arrows because sometimes space matters

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

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

span ::after 之间的 space 不应用以下代码段中的样式

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>

所以不要在中间使用不必要的 spaces

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

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

Indents inside textarea placeholder code are showing on html page

html

textarea

placeholder