没有<br>标签的新行

Question

写这个HTML:

lorem ipsum
lorem ipsum
lorem ipsum

浏览器显示:

lorem ipsumlorem ipsumlorem ipsum

有没有办法看到这个:

lorem ipsum
lorem ipsum
lorem ipsum

不使用<br>每行末尾的标记,也不使用textarea.

我需要这个,因为我的文本有100.000短行,写<br>标记100.000次是很费时间的.

Answer 1

您可以使用<pre>标记来保持换行符.

<pre>
lorem ipsum
lorem ipsum
lorem ipsum
</pre>

pre标签的默认样式是等宽字体,但可以覆盖.

您可以使用white-space: preCSS属性实现相同的效果,而无需任何额外的默认格式.

<div style="white-space: pre">
lorem ipsum
lorem ipsum
lorem ipsum
</div>

还有其他几个值white-space,但您应该参考文档来选择最合适的值.

请注意,pre将处理每个换行符相同,包括<pre>或<div>标记后面的换行符.如果你不想要它们,你需要做:

<div style=...>lorem ipsum
lorem ipsum
...

Answer 2

HTML：您可以将它们包装在块元素中，例如<div></div>或<h1></h1>

CSS：您可以使用 white-space: pre-wrap;

Js：您可以使用“替换”将“ \ n”更改为 <br/>

Answer 3

我想提供一些额外的方法来实现 OP 的目的。然而，标题“没有标签的新行<br>”的直接答案将是<pre>或 white-space: pre-wrap;类似于上面的内容。

但，

如果我需要100000行 dummy lorem ipsum <br>，我宁愿使用emmet （内置于 VSCode 中），也不愿自己编写任何内容。 ({lorem ipsum <br>}*100)*100

或者，如果这100000行短行是预定义文本，我可以使用打开的正则表达式搜索并替换( Ctrl+ H) ，将正则表达式( )替换为.$ endline<br>