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

【问题标题】：How to display a label having text with line breaks?如何显示带有换行符的文本标签？
【发布时间】：2016-04-11 20:07:39
【问题描述】：

我将文本放在<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> 中的一样？

【问题讨论】：

标签： html css label line-breaks

【解决方案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>，这里添加一个小示例，它们是如何工作和不同的。

注意，即使是空格也可以使用 e.g. 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>

【讨论】：

【解决方案2】：

没有办法在 <textarea> 标签中添加 HTML 标签，因此使用 css 格式化或使用 <br> 标签是行不通的。

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

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

【讨论】：

【解决方案3】：

如果您是从 textarea 本身获取文本，那么当我们在 textarea 中按 Enter 键时会创建新的行返回。您可以用

替换该换行符返回

/n, /r with <br>

【讨论】：

【解决方案4】：

我发现虽然<br\> 之类的html 标记不起作用，但UTF-8 标点符号确实起作用。对于换行，它将是一个“en”空格，然后是一个“em”空格（&ensp;&emsp;）。

有关 UTF-8 标点符号的更多信息，您可以在其中找到“en”和“em”空格： https://www.w3schools.com/charsets/ref_utf_punctuation.asp

对我来说，实体符号有效，但不是 dec 或 hex，如“尝试”示例中给出的。

【讨论】：