简体   繁体   English

为什么我的\\ n换行符不起作用?

[英]Why is my \n newline not working?

EDIT solved 编辑已解决

I wonder why the following code is not working-no newline is being 'produced' Anyone has an idea ? 我想知道为什么下面的代码不起作用-没有“换行符”有人产生想法吗? Thanks 谢谢

$('#results').append("Try again! \n I believe in you"); 

White spaces do not break in html, they collapse into a single displayed whitespace displayed as 空格不会在html中中断,它们会折叠成一个显示为的空白 . If you want to render a break in html you have to use a break tag <br> 如果要在html中显示中断,则必须使用break标签<br>

 $('#results').append("Try again! <br> I believe in you"); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="results"></div> 

它是HTML格式,您需要使用换行符<br>而不是换行符。

I am assuming that you are doing an ajax call or something and the results contain the '\\n' and you can't change it? 我假设您正在执行ajax调用或其他操作,并且结果包含'\\ n'并且您无法更改它?

That's fine, in HTML things like \\n and whitespace are ignored unless you explicitly state that you want to use the whitespace. 很好,在HTML中,诸如\\ n和空格之类的东西都将被忽略,除非您明确声明要使用空格。

There are two main ways to do this. 有两种主要方法可以做到这一点。

First is with the <pre> tag 首先是<pre>标签

 $(function() { $('#results').append("Try again! \\n I believe in you"); }) 
 <html> <head> <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </head> <body> <pre id="results"></pre> </body> </html> 

Second (better way) is with the css using white-space 第二(更好的方法)是使用white-space的css

In the next example I use white-space:pre-line This will only preserve your \\n or new lines 在下一个示例中,我使用white-space:pre-line这将仅保留\\ n或white-space:pre-line

 $(function() { $('#results').append("Try again! \\n I believe in you"); }) 
 <html> <head> <script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> </head> <body> <div style = "white-space: pre-line" id="results"></div> </body> </html> 

Notice that the second one is using a standard <div> , triggers a new line and doesn't preserve the extra whitespace after the \\n? 请注意,第二个命令使用的是标准<div> ,它会触发换行,并且在\\ n之后不会保留多余的空格? That might be more of what you are looking for. 那可能是您想要的更多。 You can also set it to white-space:pre and the div should behave just like a <pre></pre> in terms of white space and new lines. 您也可以将其设置为white-space:pre ,并且div在空白和换行方面的表现应与<pre></pre>

white-space has a lot of options: white-space有很多选择:

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit; 空格:普通| nowrap | pre | line | pre-wrap | initial |继承;

That should provide you with what you need. 那应该为您提供所需的东西。

You may need to use Javascript to sanitize the text if you are looking for a very specific format. 如果要查找非常特定的格式,则可能需要使用Javascript清理文本。

There are other ways to get breaks in text but if you are specifically using \\n then these are the only two ways that I know of to do it. 还有其他中断文本的方法,但是如果您专门使用\\n那么这是我所知道的仅有的两种方法。

Hope this helps! 希望这可以帮助!

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM