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

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>，在此处添加一个小示例，了解它们的工作方式和不同之处。

请注意，甚至 space 也会使用例如white-space: pre，如 "inline" 代码示例中所示

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>

Answer 2

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

现在，<textarea rows="4" cols="20">，假设您可以做到最好：您将要显示的最少行数定义为“4”，每行的最少字符数：“20”。

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

Answer 3

如果您从 textarea 本身获取文本，那么当我们在 textarea 中按回车键时会创建新行 return。您可以将换行符 return 替换为

/n, /r with <br>

Answer 4

我发现虽然 html 标签（例如 <br\> 不起作用），但 UTF-8 标点符号确实起作用。对于行 return，它将是 "en" space，后跟 "em" space (&ensp;&emsp;)。

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

对我来说，实体符号有效，但在 "try it" 示例中给出的 dec 或 hex 无效。

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

How to display a label having text with line breaks?

html

css

label

line-breaks