HTML mail prehead not hidden

I've added a prehead text to my HTML mail, but it isn't hidden in Outlook. I added the prehead styling as inline style, and also included it in the head style tag.

<!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>

    ...

Why isn't the preheader hidden? It keeps rendering as if none of the styles are applied.

Thanks in advance

Solution

Apparently the content in the preheader was too long. Limiting the amount of characters fixed my issue.