Gmail 无缘无故地剪切 html 电子邮件

Jea*_*rin 7 email gmail node.js sendgrid

我们使用 node.js 来格式化 SendGrid 发送给用户的 html 电子邮件,以确认帐户创建或其他类似的事情。电子邮件已正确发送。所有内容都正确显示。但是,在 Gmail 中,即使所有内容都正确显示,最后还是会出现一条消息,说电子邮件已被截断并单击链接以显示所有内容。如果我们点击,我们会得到相同的内容,但缺少一些样式。其他语言的同一电子邮件不会显示此消息。但所有电子邮件都具有相同的结构。邮件小于30KB(代码+图片)

您会在上面找到扩展的代码。(内容已更改)其后是在 ejs 文件中生成的内容。

我多次阅读代码以找到任何问题(缺少标签)。我尝试手动发送,但没有出现通知。我计算了重量以确保它超过 102KB。结果:最大 30KB。我将代码与另一个没有这个问题的代码进行了比较。结构上没有什么不同。只是内容不同。

<!DOCTYPE html>
<html>
    <head>
        <meta 
        http-equiv="Content-Type" 
        content="text/html; charset=utf-8" />
        <style>
            body{
                font-family:Tahoma,Verdana,sans-serif;
                font-size:14px;
                color:#000;
                margin:0
            }
            a{
                text-decoration:none
            }
            a.link{
                color:#EB3052;
                font-weight:700
            }
            a.button{
                background-color:#EB3052;
                color:#fff;
                padding:10px;
                border-radius:5px;
                text-transform:uppercase;
                font-size:12px;
                font-weight:700;
                letter-spacing:1px
            }
            a.button.decline{
                background-color:#f5f7f7;
                color:#EB3052;
                font-weight:400
            }
            ul{
                line-height:24px
            }
        </style>
    </head>
    <body>
        <div 
        style="
            width:100%; 
            height: 100%; 
            text-align:center; 
            font-family: Tahoma, Verdana, sans-serif; 
            background-color: #F5F7F6;
        " 
        align="center"
        >
            <table 
            width="600px" 
            cellspacing="0" 
            cellpadding="0" 
            border="0" 
            align="center" 
            style="
                padding: 14px;
            "
            >
                <tr>
                    <td 
                    height="32" 
                    width="30" 
                    style="padding: 14px;"
                    >
                        <a 
                        href="url"
                        >
                            <img 
                            src="url" 
                            border="0" 
                            alt="url" 
                            style="
                                max-height: 60px
                            " 
                            />
                        </a>
                    </td>
                </tr>
                <tr>
                    <td>
                        <table 
                        width="100%" 
                        style="
                            background: #fff; 
                            text-align: left; 
                            font-size:16px; 
                            padding-top: 40px; 
                            padding-bottom: 40px;
                        "
                        >
                            <tr>
                                <td 
                                style="
                                    padding-left: 32px; 
                                    padding-right: 32px;
                                "
                                >
                                    <table 
                                    width="100%" 
                                    cellspacing="0" 
                                    cellpadding="0" 
                                    border="0"
                                    >
                                        <tr>
                                            <td>
                                                <div 
                                                style="
                                                    width:100%; 
                                                    height: 100%; 
                                                    text-align:left; 
                                                    font-family: Tahoma, Verdana, sans-serif; 
                                                    line-height:18px;
                                                "
                                                >
                                                    Hi 
                                                    <br/>
                                                    <br/>
                                                    Thanks to your contribution of $<%- body.amount %> to <%- body.recipient %>, the fundraising goal is one step closer!
                                                    <br/>
                                                    <br/>
                                                    Here is your transaction information:
                                                    <br/>
                                                    <br/>
                                                    <strong>
                                                        Transaction information
                                                    </strong>
                                                    <br/>
                                                    Transaction number: 
                                                    <br/>
                                                    Recipient: 
                                                    <br/>
                                                    Amount: 
                                                    <br/>
                                                    Type: 
                                                    <br/>
                                                    Date: 
                                                    <br/>
                                                    Payment method: 
                                                    <br/>
                                                    <br/>
                                                    <strong>
                                                        Billing information
                                                    </strong>
                                                    <br/>
                                                    Full name: 
                                                    <br/>
                                                    Email address: 
                                                    <br/>
                                                    Postal code: 
                                                    <br/>
                                                    Country: 
                                                    <br/>
                                                    <br/>
                                                    Thank you for your generosity!
                                                    <br/>
                                                    <br/>
                                                    Sincerely,
                                                    <br/>
                                                    <br/>
                                                    Lorem
                                                    <br>
                                                    <br>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td 
                    style="
                        background: url(url), #EB3052; 
                        background-repeat-x: repeat; 
                        background-position-x: center; 
                        height: 8px;
                    "
                    >   
                    </td>
                </tr>
                <tr 
                style="
                    background-color:#EB3052; 
                    text-align: left;
                "
                >
                    <td 
                    style="
                        padding-top:14px; 
                        padding-bottom:14px; 
                        padding-left: 32px; 
                        padding-right: 32px; 
                        color:#fff; 
                        font-size: 12px;
                    "
                    >
                        <strong>
                            Lorem ipsum dolor sit amet.
                        </strong>
                        <br/>
                        <strong>
                            Lorem ipsum dolor sit amet.
                        </strong>
                    </td>
                </tr>
                <tr>
                    <td 
                    style="
                        text-align:center; 
                        height:24px; 
                        font-size: 13px; 
                        color:#B1B1B1; 
                        padding-top:14px; 
                        padding-bottom:14px; 
                        padding-left: 32px; 
                        padding-right: 32px;
                    "
                    >
                        Lorem ipsum dolor sit amet.
                        <span 
                        style="
                            color:#FFFFFF;
                        "
                        >
                            Lorem ipsum dolor sit amet.
                        </span>
                         Lorem ipsum dolor sit amet.
                        <br/>
                        <br/>
                        <a 
                        href="url" 
                        style="
                            color: #B1B1B1;
                        "
                        >
                            Lorem ipsum dolor sit amet.
                        </a>
                         | 
                        <a 
                        href="url" 
                        style="
                            color: #B1B1B1;
                        "
                        >
                            Lorem ipsum dolor sit amet.
                        </a>
                         | 
                        <a 
                        href="url" 
                        style="
                            color: #B1B1B1;
                        ">
                            Lorem ipsum dolor sit amet.
                        </a>
                        <br/>
                        <br/>
                        <a 
                        href="url"
                        >
                            <img 
                            src="url" 
                            border="0" 
                            alt="url" 
                            style="
                                max-height: 64px
                            "
                            />
                        </a>
                    </td>
                </tr>
            </table>
        </div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)
Hi <%- body.firstName %>!<br/><br/>
Thanks to your contribution of $<%- body.amount %> to <%- body.recipient %>, the fundraising goal is one step closer!<br/><br/>
Here is your transaction information:<br/><br/>
<strong>Transaction information</strong><br/>
Transaction number: <%- body.transactionNumber %><br/>
Recipient: <%- body.recipient %><br/>
Amount: $<%- body.amount %> <%- body.currency %><br/>
Type: <%- body.type %><br/>
Date: <%- body.date %><br/>
Payment method: <%- body.payment %><br/><br/>
<strong>Billing information</strong><br/>
<% if (body.organizationName) { %>
Company name: <%- body.organizationName %><br/>
<% } %>
Full name: <%- body.firstName %> <%- body.lastName %><br/>
Email address: <%- body.email %><br/>
Postal code: <%- body.postalCode %><br/>
Country: <%- body.country %><br/><br/>
Thank you for your generosity!<br/><br/>
Sincerely,<br/><br/>
<%- sender.name %>
Run Code Online (Sandbox Code Playgroud)

电子邮件已正确且完整地显示,但电子邮件末尾会显示一条通知,说明它已被截断(但未截断)。

在这种情况下不应出现通知。

当电子邮件已经正确完整显示时,如何防止Gmail在电子邮件末尾显示通知?

Rid*_*dim 6

就我而言,问题是由电子邮件中的一个非 ASCII 字符(特别是\xc3\xa4)引起的 - 将其添加到邮件的任何部分都会将其剪辑到 gmail 中。

\n\n

我确定我正在使用 utf-8 对电子邮件进行编码,也许 sendgrid 稍后会以某种方式对其进行重新编码。

\n

  • 对@Ridim 所说的话+1。我们还发现,如果您将字符替换为适当的 HTML 实体(例如 _or_ ë),则 Gmail 会很满意。对于 .Net 开发人员来说,HttpUtility.HtmlEncode 就可以解决问题。 (2认同)
  • 如果它可以帮助某人 - 我刚刚偶然发现了“裁剪问题”以及在变量中添加北欧字符(æ,ø,å),这些变量使用 {{ someVariable }} 填充到动态模板中。通过结合 @Jedidja 提到的 HttpUtility.HtmlEncode 并在动态模板中使用 {{{ someVariable }}},剪切问题消失了 - 并且字符 (æ,ø,å) 也能正确显示。 (2认同)
  • 只是想提一下:我在页脚中使用了 © 字符,这给我带来了问题 (2认同)