Html 如何显示带有换行符的文本的标签？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36558282/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display a label having text with line breaks?
提问by ubuntu
I put text in a <textarea>like this:
我把文字放在<textarea>这样的：
First day
1-one apple.
2-one orange.
3-two cups of milk.
But it shows in a <label>like this:
但它显示<label>如下：
First day 1- one apple. 2-one orange. 3- two cups of milks.
How do I make it look the same as in a <textarea>?
我如何使它看起来与 a 中的一样<textarea>？
回答by Ason
Give the label white-space: pre-wrapand it will break line as the text area does
给标签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>Besides the white-spaceproperty combined with a new line character (e.g. \n), the HTML way to break line is using <br>, add here is a small sample how they work and differ.
除了white-space与换行符（例如\n）结合的属性之外，HTML 的换行方式是使用<br>，这里添加一个小示例，它们是如何工作和不同的。
Note, even space's are preserved using e.g. white-space: pre, as seen in the "inline" code sample
请注意，如white-space: pre“内联”代码示例中所示，甚至使用 eg 保留空间
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>回答by arch1ve
There is no way of adding HTML tags in a <textarea>tag, so formatting with css for example or using <br>tags is not going to work.
无法在<textarea>标签中添加 HTML 标签，因此使用 css 或使用<br>标签进行格式化是行不通的。
Now, <textarea rows="4" cols="20">, is let's say the best you can do: you define the minimum rows to be show as "4" and the minimum amount of characters per row: "20".
现在，<textarea rows="4" cols="20">让我们说您能做的最好的事情：您定义要显示的最少行数为“4”，而每行的最少字符数为：“20”。
The best method though is using <div contenteditable="true"></div>in which you can use tags like <br>and also css styling.
最好的方法是使用<div contenteditable="true"></div>，您可以在其中使用标签<br>和 css 样式。
回答by John Turner
I've found that though html tags such as <br\>won't work, UTF-8 punctuation does work. For a line return it would be an "en" space, followed by an "em" space (  ).
我发现虽然诸如 html 标签<br\>不起作用，但 UTF-8 标点符号确实有效。对于行返回，它将是一个“en”空格，后跟一个“em”空格 (   )。
More on UTF-8 punctuation, where you can find the "en" and "em" space: https://www.w3schools.com/charsets/ref_utf_punctuation.asp
有关 UTF-8 标点符号的更多信息，您可以在其中找到“en”和“em”空间：https: //www.w3schools.com/charsets/ref_utf_punctuation.asp
For me the entity symbol worked, but not the dec or hex, as given in the "try it" example.
对我来说，实体符号有效，但 dec 或 hex 无效，如“尝试”示例中所述。
回答by pradeep1991singh
If you are fetching text from textarea itself then when we hit enter in textarea that creates new line return. You can replace that newline return with
如果您从 textarea 本身获取文本，那么当我们在 textarea 中按 Enter 键时，会创建新行返回。您可以将换行符替换为
/n, /r with <br>
/n, /r with <br>
