js字符串换行

字符串换行

• 方式一:\n换行

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

输出结果:

1
2

• 方式二:模板字符串换行

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

输出结果:

1
2

注意:在使用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; //只能在半角空格或连字符处换行