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

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

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>