字符串换行

方式一:\n换行

<div styles={{whiteSpace: 'pre-wrap'}}>
    {
        "1\n2
    }
</div>

输出结果: 

1

2

方式二:模板字符串换行

<div style={{whiteSpace: 'pre-wrap'}}>
{
    `1
2`
}
</div>

输出结果: 

1

2

使用模板字符串的时候要注意换行后前方不要有空格,否则在显示时第二行前方也会有空格,

<div style={{whiteSpace: 'pre-wrap'}}>
{
    `1
    2`
}
</div>

如上方代码的现实效果:

 注意:在使用div标签时,要想以上两种方式的换行起作用必须给div加上css样式:                         white-space: 'pre-wrap';                                                                                                                     此处补充关于white-space和word-break的几个常用值的用法:

white-space: pre; //保留回车和空格并且不会自动换行

white-space: pre-line; //保留回车,多个连续的空格只保留一个,且会自动换行

white-space: pre-wrap; //保留回车,所有的空格并且会自动换行

white-space: nowrap; //强制不换行

//word-break针对非CJK脚本的断行规则(CJK脚本是中国，日本和韩国（"中日韩"）脚本。)
word-break:break-all; //允许在单词内换行
word-break:keep-all; //只能在半角空格或连字符处换行

 方式三、pre标签换行

pre标签换行和模板字符串换行一样只需要在需要换行的地方回车即可,同时也要注意,前方的空格也会显示在页面上,和模板字符串一样

<pre>1
2
</pre>

当在react中使用pre标签直接使用回车换行时不生效:因为JSX会去除换行，导致pre标签失效.          解决方法如下:

方法一、加<br />标签

<pre>1<br />2</pre>

方法二、使用模板字符串

<pre>
{`1
2`}
</pre>

方法三、换行符

//方式1:\n
<pre>1{'\n'}2</pre>
//方式二:回车(其中为反引号)
<pre>1{`
`}2</pre>