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

Posted 2023-03-05

【中文标题】textarea占位符代码内的缩进显示在html页面上

【英文标题】：Indents inside textarea placeholder code are showing on html page

【发布时间】：2021-12-14 19:19:09

【问题描述】：

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

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

【问题讨论】：

您是否尝试为您的文本区域设置行和列？

【参考方案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>

【讨论】：

所以，这就是我的代码现在的样子。我只是想让它变成多行，这样看起来更好，整个代码都在视图中，而不是一行一直跨到右边。

为了确保一切正常，而不是在 placeholder 或 > 之前破坏它。但是由于占位符的长度很大，您必须处理更大的代码行@MarcusArnhold

我想我会把这个作为回答，谢谢。我希望有一种方法可以做类似 placeholder = ["text 1" + "text 2" + "text 3"] 的事情。