css - 带有中断线的文本在 Rails 中不起作用

Question

我有一个 AngularJs + Rails。

我有一个带有文本字段的表单，用户可以在其中编写带有断行的任何文本。当用户提交表单时，消息存储在 db 中并通过电子邮件发送给另一个用户。发送的电子邮件应保留换行符。

关键是消息的格式在生产中完美运行。然而，它已停止在开发中工作。显然，我们还没有对影响这一点的代码进行特定更新，但我们正在开发中将 Rails 和 mysql 迁移到更新版本。所以，我想知道它是否与此有关，但是，我无法看到问题究竟出在哪里。

请用一个例子来看看这两种不同的行为:

我们将在两个环境中发送相同的示例消息，因此在我们的 textarea 中我们写:

This is a test message

with a some break lines.

Lorem ipsum whatever.

这是发送以存储在我的 mysql 数据库中的 varchar 字段中的文本消息: This is a test message\n\nwith a some break lines.\n\nLorem ipsum whatever.
这是我可以看到存储在开发和生产数据库中的文本: This is a test message with a some break lines. Lorem ipsum whatever.
这是在开发和生产中发送电子邮件的模板(此处没有更改): <p class="p1" style="white-space: pre-wrap;"><%= @offer.message_pre_offer %></p>
这是我在开发中通过电子邮件发送消息时看到的日志:

<p class=3D"p1" style=3D"white-space: pre-wrap; margin: 1em 0; padding: 0=
; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; color: #606=
060; font-family: Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans=
-serif; font-size: 15px; line-height: 150%; font-weight: 300;" align=3D"l=
eft">This is a test message=0D
=0D
with a some break lines.=0D
=0D
Lorem ipsum whatever.</p>=0D
<style>=0D

不幸的是，我无法在生产中看到此详细日志，因为调试级别未设置为调试。

当我在 webmail 中打开测试用户在 gmail 中收到的电子邮件时，这是我可以在 Chrome 的开发工具中看到的代码:

开发工作错误:

<p style="white-space:pre-wrap;margin:1em 0;padding:0;color:#606060;font-family:Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:15px;line-height:150%;font-weight:300" align="left">This is a test message



with a some break lines.



Lorem ipsum whatever.</p>

这是它在 gmail webmail 中的样子:


生产工作正常:

<p style="color:#606060;font-family:Source Sans Pro,Helvetica Neue,Helvetica,Arial,sans-serif;font-size:15px;font-weight:300;line-height:150%;margin:1em 0;padding:0;text-align:left;white-space: pre-line;" align="left">This is a test message

with a some break lines.

Lorem ipsum whatever.</p>

这是它在生产中的样子:


可能根本不相关，购买我的 rails 版本是:

开发:Rails 5.2.4，mysql 8.0.18

生产:Rails 4.4.0，mysql Ver 14.14 Distrib 5.5.40，用于 debian-linux-gnu (x86_64) 使用 readline 6.3

Answer 1

这很可能解释了额外的垂直间距:

Windows 使用 CR LF 换行。

Unix 系统使用 LF。

Macintosh 使用 CR。

当您在需要不同形式的系统上显示一种形式的换行符时，可能会出现困惑。

也许“正确”的设计只使用 LF，然后根据目标机器根据需要进行更改或扩展。请注意 <br>相当于 HTML，其中 CR 和 LF 只是“空白”。

另见 <pre>和 PHP 的 NL2BR()可能还有其他事情。