Email Template: Prevent Email Body Overlap In Preheader
Preheader : Preheader is the additional text we will see in the mail box along with From name and Subject which is useful for many purposes like short description of email.
Set preheader: Preheader text should be the first text after <body> in email template. We will apply inline css styles to display preheader only inside inbox preheader area and hide it from email body as below.
<body>
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
Preheader text
</div>
</body>
Email body overlap in preheader: Some time email content will overlap in preheader area in inbox. This is when length of preheader text is very short. One solution to prevent email body overlap in preheader area is by adding whitespaces after preheader text. Inserting ‌ after preheader will add empty space. This code is also hidden using css so that it won't come in email body.
eg:
<!-- Empty space after preheader text -->
<div style="display: none; max-height: 0px; overflow: hidden;">
‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌
</div>
Reference : https://litmus.com/blog/the-little-known-preview-text-hack-you-may-want-to-use-in-every-email