如何显示带有换行符的文本的标签？

Question

我将文本放在 <textarea> 中，如下所示：

 First day
1-one apple.
2-one orange.
3-two cups of milk.

但它显示在 <label> 中，如下所示：

 First day 1- one apple. 2-one orange. 3- two cups of milks.

如何使它看起来与 <textarea> 中的一样？

原文由 Mohammed H. S. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

给出标签 white-space: pre-wrap 它会像文本区域一样换行

 textarea {
  height: 70px;
}
label {
  white-space: pre-wrap;
}

 <textarea>
  First day
1-one apple.
2-one orange.
3-two cups of milk.
</textarea>

<br><br>

<label>
  First day
1-one apple.
2-one orange.
3-two cups of milk.
</label>

---

除了 white-space 属性与换行符相结合（例如 \n ），HTML 换行的方式是使用 <br> ，这是一个小示例他们工作并且不同。

请注意，即使是空格也使用例如 white-space: pre 保留，如“内联”代码示例中所示

 var sample_script = document.querySelector('.sample.script');

var name = "One Two Three";
var name1 = name.replace(/ /g, '\n');
var name2 = name.replace(/ /g, '<br>');

sample_script.innerHTML += name1;
sample_script.innerHTML += "<br><br>";
sample_script.innerHTML += name2;

 div.pre {
  white-space: pre;
}

/*  styling for this demo  */
body {display: flex;}
.sample {flex: 1; margin: 0 20px;}

 <div class="sample inline">

  Inline
  <hr>
  <div>
    One
    Two
    Three
  </div>

  <div class="pre">
    One
    Two
    Three
  </div>
</div>

<div class="sample script">
  Script
  <hr>

</div>

原文由 Asons 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

无法在 <textarea> 标签中添加 HTML 标签，因此使用 css 格式化或使用 <br> 标签将不起作用。

现在， <textarea rows="4" cols="20"> ，让我们说你能做的最好的事情：你定义要显示的最少行数为“4”，每行最少字符数：“20”。

不过，最好的方法是使用 <div contenteditable="true"></div> ，您可以在其中使用 <br> 等标签以及 css 样式。

原文由 arch1ve 发布，翻译遵循 CC BY-SA 3.0 许可协议