HTML 邮件 prehead 未隐藏答案

【问题标题】：HTML mail prehead not hiddenHTML 邮件 prehead 未隐藏
【发布时间】：2020-09-22 01:10:03
【问题描述】：

我已在我的 HTML 邮件中添加了预置文本，但它并未隐藏在 Outlook 中。我将 prehead 样式添加为内联样式，并将其包含在 head 样式标签中。

<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <style>
        .preheader {
            color: #f6f6f6;
            display: none !important;
            max-height: 0;
            max-width: 0;
            opacity: 0;
            visibility: hidden;
            mso-hide: all;
            overflow: hidden;
            font-size: 0;
            line-height: 1px;
        }
    </style>
</head>
<body style="background-color: #f6f6f6; font-family: 'Verdana', sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 10px; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
    <div class="preheader" style="color: #f6f6f6; display: none !important; max-height: 0; max-width: 0; opacity: 0; visibility: hidden; mso-hide: all; overflow: hidden; font-size: 0; line-height: 1px;">
        {% block preheader %}{% endblock %}
    </div>

    ...

为什么不隐藏预标题？它会一直渲染，就好像没有应用任何样式一样。

提前致谢

【问题讨论】：

我认为那是因为你有display:none !important，而 Outlook 不尊重重要标志。所以，改成display:none

标签： outlook html-email

【解决方案1】：

显然，预标题中的内容太长了。限制字符数量解决了我的问题。

【讨论】：