There's a lot of ways to implement preheaders in mail:
using alt attribute in a spacer (or image) in the top of your mail
type it as visible text (just above the link for the web version)
type it as invisibile text (matching the text color with the background and/or using font-size:0)
Avoid the first solution (alt attribute), since it's not supported by iPhone and iPad. Outlook will also show the path of your image. ALSO avoid using div or other CSS solutions.
Solution #2 and #3 are actually the best ways since they're supported everywhere. NOTE: by "everywhere" I mean client and web client that actually support preheaders: Gmail, iPhone, iPad, Outlook, etc.
Just remember: if the number of chars is lower than the max number supported by that client, it will show you the next text too.
For your info, here are the max chars limits: GMAIL (FIREFOX, IE, CHROME, SAFARI): max 97 chars IPHONE 4: max 81 chars vertically, max 137 chars horizontally IPAD: 87 chars OUTLOOK: max 255 chars
I have used the hidden DIV technique successfully, and I think it's very important to control what the pre-text says, but in some email clients that hidden text is visible if you forward the email. This is true for Outlook 07 and Gmail among others. Some of my clients have had issues with that, and others are fine with it.
Also display:none will not work in all email clients. I usually go overkill and style the hidden DIV like this:
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
Insert preview text here.
</div>
The phrases “preview text” and “preheader text” are often used interchangeably. However, they are in fact slightly different elements of an email.
The preheader text is what is used to control the preview text that appears in the inbox, usually below the subject line. Preheader text appears visually above the header in the email body itself.
The preview text is what is seen in the message envelope of the email in the inbox.
To add a proper Preview Text that is hidden in the mail body use this little hack:
<div style="display:none;font-size:1px;color:#333333;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">
Insert preview text here.
</div>
发布评论
评论（4）
你说的是所谓的“Preheader”。
有很多方法可以在邮件中实现前置标题：
避免第一个解决方案（alt 属性），因为 iPhone 和 iPad 不支持它。前景
还将显示您的图像的路径。
还要避免使用 div 或其他 CSS 解决方案。
解决方案#2 和#3 实际上是最好的方法，因为它们到处都受支持。
注意：“任何地方”是指实际支持预标题的客户端和 Web 客户端：Gmail、iPhone、iPad、Outlook 等。
请记住：如果字符数低于该客户端支持的最大数量，它会显示给您下一个文本也是如此。
供您参考，以下是最大字符数限制：
GMAIL（FIREFOX、IE、CHROME、SAFARI）：最多 97 个字符
IPHONE 4：垂直最多 81 个字符，水平最多 137 个字符
IPAD：87 个字符
展望：最多 255 个字符
希望这会有所帮助。
享受 ;）
You're talking about the so called "Preheader".
There's a lot of ways to implement preheaders in mail:
Avoid the first solution (alt attribute), since it's not supported by iPhone and iPad. Outlook
will also show the path of your image.
ALSO avoid using div or other CSS solutions.
Solution #2 and #3 are actually the best ways since they're supported everywhere.
NOTE: by "everywhere" I mean client and web client that actually support preheaders: Gmail, iPhone, iPad, Outlook, etc.
Just remember: if the number of chars is lower than the max number supported by that client, it will show you the next text too.
For your info, here are the max chars limits:
GMAIL (FIREFOX, IE, CHROME, SAFARI): max 97 chars
IPHONE 4: max 81 chars vertically, max 137 chars horizontally
IPAD: 87 chars
OUTLOOK: max 255 chars
hope this helps.
Enjoy ;)
我已经成功地使用了隐藏的 DIV 技术，并且我认为控制前置文本的内容非常重要，但在某些电子邮件客户端中，如果您转发电子邮件，则隐藏的文本是可见的。 Outlook 07 和 Gmail 等也是如此。我的一些客户对此有疑问，而另一些则对此表示满意。
另外，display:none 不适用于所有电子邮件客户端。我通常会过度设计隐藏的 DIV 样式，如下所示：
width:0;overflow:hidden;float:left;display:none;max-height:0px;visibility:hidden
另外，请继续设置文本样式，如果它们这样做的话转发电子邮件，它就会出现，它看起来不错并且与您的设计有意义。
I have used the hidden DIV technique successfully, and I think it's very important to control what the pre-text says, but in some email clients that hidden text is visible if you forward the email. This is true for Outlook 07 and Gmail among others. Some of my clients have had issues with that, and others are fine with it.
Also display:none will not work in all email clients. I usually go overkill and style the hidden DIV like this:
width:0;overflow:hidden;float:left;display:none;max-height:0px;visibility:hidden
Also also, go ahead and style the text so if they do forward the email and it shows up, it will look good and make sense with your design.
您正在寻找“前置标题”。就我个人而言，我会尝试以前置标头可见的方式设计您的电子邮件 - 不需要黑客。
You're looking for a 'pre-header'. Personally, I would try to design your email in such a way that the pre-header is visible - no hacks needed.
短语“预览文本”和“前置文本”通常可以互换使用。然而，它们实际上是电子邮件的稍微不同的元素。
前置标题文本用于控制收件箱中显示的预览文本，通常位于主题行下方。前置标题文本在视觉上显示在电子邮件正文本身的标题上方。
预览文本是在收件箱中电子邮件的消息信封中看到的内容。
要添加隐藏在邮件正文中的正确预览文本，请使用以下小技巧：
The phrases “preview text” and “preheader text” are often used interchangeably. However, they are in fact slightly different elements of an email.
The preheader text is what is used to control the preview text that appears in the inbox, usually below the subject line. Preheader text appears visually above the header in the email body itself.
The preview text is what is seen in the message envelope of the email in the inbox.
To add a proper Preview Text that is hidden in the mail body use this little hack: