没有新线<br>标签
[英]new line without <br> tag
问题描述
Writing this html:
编写此 html：
lorem ipsum
lorem ipsum
lorem ipsum
browser shows:浏览器显示：
lorem ipsumlorem ipsumlorem ipsum
Is there a way to see this:有没有办法看到这个：
lorem ipsum
lorem ipsum
lorem ipsum
without using <br> tag at the end of each line, and without using textarea.在每行的末尾不使用<br>标签，也不使用 textarea。
I need this because I have a text with 100.000 short lines, and it is time consuming to write <br> tag 100.000 times.我需要这个，因为我有一个包含 100.000 行短行的文本，并且编写<br>标签 100.000 次非常耗时。
7 个解决方案
解决方案1
46 已采纳 2016-03-24 00:28:00
You can use the <pre> tag to keep the line breaks.您可以使用<pre>标签来保留换行符。
<pre>
lorem ipsum
lorem ipsum
lorem ipsum
</pre>
The default style for pre tags is monospaced font, but that can be overriden. pre标签的默认样式是等宽字体，但可以覆盖。
You can achieve the same effect without any extra default formatting using the white-space: pre CSS property.您可以使用white-space: pre CSS 属性实现相同的效果，而无需任何额外的默认格式。
<div style="white-space: pre">
lorem ipsum
lorem ipsum
lorem ipsum
</div>
There are several other values for white-space , but you should refer to the documentation to choose the most fitting one. white-space还有其他几个值，但您应该参考文档以选择最合适的值。
Note that pre will treat every line break the same including the one following the <pre> or <div> tags.请注意， pre会将每个换行符视为相同的，包括<pre>或<div>标签之后的换行符。 If you don't want them you will need to do:如果您不想要它们，则需要执行以下操作：
<div style=...>lorem ipsum
lorem ipsum
...
解决方案2
8 2016-03-24 00:33:38
Html: You may wrap them in block elements like <div></div> or <h1></h1> Html：您可以将它们包装在块元素中，例如<div></div>或<h1></h1>
Css: You may use white-space: pre-wrap; Css: 你可以使用white-space: pre-wrap;
Js: You may use "replace" to change "\\n" to <br/> Js：您可以使用“替换”将“\\n”更改为<br/>
解决方案3
4 2019-12-21 14:09:35
I would like to deliver some additional ways to achieve the OP's purpose.我想提供一些额外的方法来实现 OP 的目的。 Yet, the direct answer for the title "new line without <br> tag" would be <pre> or white-space: pre-wrap;然而，标题“没有<br>标签的新行”的直接答案是<pre>或white-space: pre-wrap; like the above.像上面那样。
But,但是，
If I need 100000 lines of dummy lorem ipsum <br> , I would rather use emmet (which is built-in in VSCode) than write anything myself.如果我需要100000行 dummy lorem ipsum <br> ，我宁愿使用emmet （ VSCode内置）也不愿自己编写任何东西。 ({lorem ipsum <br>}*100)*100
Or, in case these 100000 short lines are predefined text , I can search and replace ( Ctrl + H ) with regex turned on, replace the regex $ ( endline ) with <br> .或者，如果这100000短行是预定义文本，我可以在打开正则表达式的情况下搜索和替换( Ctrl + H )，将正则表达式$ ( endline )替换为<br> 。
解决方案4
1 2021-05-11 10:40:03
To fix, add CSS style white-space: pre-wrap:要修复，请添加 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
0 2021-01-23 06:55:47
Yes, the right way to add breakpoints is to use white-space:pre in css styling sheet.是的，添加断点的正确方法是在 css 样式表中使用white-space:pre 。 like this像这样
<div style="white-space: pre">
Enjoy the videos and music you love.
Create your own business
or entertainment channel
</div>
解决方案6
0 2022-07-27 05:42:36
If the only issue is the repetition of typing the < br > code, then I would suggest using the clipboard to copy the < br > code, and then every time you need to type it you can paste it instead.如果唯一的问题是重复键入 <br> 代码，那么我建议使用剪贴板复制 <br> 代码，然后每次需要键入时都可以粘贴它。 < ctrl > v is much easier than having to use the shift keys for the < and > characters. < ctrl > v 比对 < 和 > 字符使用 shift 键要容易得多。 You don't need a text editor, just < ctrl > c to copy and v to paste.您不需要文本编辑器，只需 < ctrl > c 复制和 v 粘贴。
Just how I would do it;我会怎么做； assuming that you don't need the clipboard for another part of your particular process.假设您的特定过程的另一部分不需要剪贴板。
"work smarter, not harder";) “更聪明地工作，而不是更努力地工作”；）
解决方案7
0 2022-07-27 06:33:59
In this case, you can just use (white-space: pre) as style.在这种情况下，您可以只使用 (white-space: pre) 作为样式。
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title> line break without using <br> tag</title> </head> <body> <div style="white-space. pre"> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.