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: pre CSS属性，无需任何额外的默认格式即可达到相同的效果。

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

white-space还有其他一些值，但您应该参考documentation选择最合适的值。

请注意，pre会将每个换行符视为相同，包括<pre>或<div>标记后的换行符。如果您不想要它们，则需要执行以下操作：

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

Answer 2

Html：您可以将它们包含在<div></div>或<h1></h1>

等块元素中

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

Js：您可以使用＆＃34;替换＆＃34;改变＆＃34; \ n＆＃34;到<br/>

Answer 3

我想提供一些其他方法来实现OP的目的。但是，标题“没有<br>标签的换行” 的直接答案是<pre>或 white-space: pre-wrap;如上。

但是

如果我需要虚拟lorem ipsum <br>的 100000 行，我宁愿使用emmet （VSCode内置）我自己的任何事。 ({lorem ipsum <br>}*100)*100

或者，如果这些 100000 短行是预定义的文本，我可以search and replace（ Ctrl + H ）并打开regex，用$替换正则表达式endline （<br>）。

Answer 4

是的，添加断点的正确方法是在 css 样式表中使用 white-space:pre。像这样

<div style="white-space: pre"> 
       Enjoy the videos and music you love.
        Create your own business
        or entertainment channel 
    </div>

Answer 5

要修复，请添加 CSS 样式 white-space: pre-wrap:

div {
   white-space: pre-wrap;
}


<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>

新行没有标签

5 个答案: