Мы используем node.js для форматирования html-сообщений электронной почты, отправляемых SendGrid пользователям для подтверждения создания учетной записи или других подобных вещей. Письмо отправлено правильно. Весь контент отображается правильно. Но в Gmail, даже если весь контент отображается правильно, в конце появляется сообщение о том, что электронная почта была усечена, и нажмите на ссылку, чтобы отобразить все. Если мы нажимаем, мы получаем тот же контент с некоторым отсутствующим стилем. Это же письмо на другом языке не будет отображать это сообщение. Но все письма имеют одинаковую структуру. Адрес электронной почты меньше 30 КБ (код + изображения)
Вы найдете израсходованный код выше. (содержание было изменено)
После содержимого, сгенерированного в файле ejs.
Я много раз читал код, чтобы найти любую проблему (отсутствующие теги).
Я попытался отправить его вручную, но уведомление не появилось.
Я рассчитал вес, чтобы убедиться, что он превышает 102 КБ. Результат: 30 КБ макс.
Я сравнил код с другим, у которого нет этой проблемы. Ничего другого по структуре. Отличается только содержание.
<!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>
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 %>
Правильно и полностью отображается электронное письмо, но в конце электронного письма отображается уведомление о том, что оно было усечено (но не).
В этом случае уведомление не должно появляться.
Как запретить Gmail отображать уведомление в конце письма, если оно уже правильно и полностью отображается?