为什么在我的情况下换行符不起作用？

Question

This is the line that doesn't work:

const modalContent = () => `First line.\nSecond line?`;

I use it in React app in my component.

Answer 1

The new line is created in the string:

 const modalContent = () => `First line.\\nSecond line?` console.log(modalContent()); 

… but a new line in HTML is treated just like any other kind of white space.

 First line. Second line? 

You need a <br> element instead of a new line, or CSS which sets white-space to a value where new lines are significant (such as pre ).

 First line.<br> Second line? 

Answer 2

In normal HTML the line-break is simply handled like a normal space. There are two solutions.

1. You tell the surrounding html element with css that line-breaks and whitespaces are important. This is done fe by setting the style white-space to pre .

2. You set the return-value of your function not to a string but to a jsx. Then you can use a br element for a line-break:

const modalContent = () => <span>First line.<br/>Second line?</span>;

Answer 3

Because you are using the backtick. This resembles a template string in ES6. It will respect any empty lines in the actual string. \\n Will work in a regular string with single or double quotes

So:

 const multi = ` this is multiline text `; const text = "this is not \\nmultiline\\ntext"; console.log(multi); console.log(text)