React中Firebase邮件触发器添加换行失效问题求助

问题根源 #

你用的是html字段构建邮件内容，HTML的渲染规则会自动忽略普通换行符（\n/\r\n）和连续空格，所以模板字符串里的换行在邮件客户端会被合并成一段。

可行解决方案 #

有两种常用方式实现分段/多行效果：

1. 插入HTML换行标签 <br> #

在需要换行的位置添加<br>标签，双标签对应空行效果：

to: email,
message: {
    subject: "Thanks you for registering!",
    html: `
Hey ${firstName || ""}!
<br><br>
We wanted to take a moment to thank you for signing up with us. We are thrilled to have you on board and can't wait to help you achieve your Real Estate Wholesaling and Investing goals.
<br><br>
We are dedicated to providing the best Wholesaling tools to help you succeed. If you have any questions or need assistance, our team is always here to help.
<br><br>
Thank you again for choosing us, we can't wait to see how you use our platform!`,
},

2. 使用HTML段落标签 <p> #

把每个独立段落用<p>包裹，邮件客户端会自动为段落添加间距，排版更规整：

to: email,
message: {
    subject: "Thanks you for registering!",
    html: `
<p>Hey ${firstName || ""}!</p>
<p>We wanted to take a moment to thank you for signing up with us. We are thrilled to have you on board and can't wait to help you achieve your Real Estate Wholesaling and Investing goals.</p>
<p>We are dedicated to providing the best Wholesaling tools to help you succeed. If you have any questions or need assistance, our team is always here to help.</p>
<p>Thank you again for choosing us, we can't wait to see how you use our platform!</p>`,
},

补充选项 #

如果不需要HTML格式的邮件，可以把html字段替换成text字段，这时普通的\n\n换行符就能正常生效，但纯文本邮件的排版灵活性会差一些。

内容的提问来源于stack exchange，提问作者Christopher Koziol