Чтобы это исправить, вам понадобится предварительный заголовок. Предварительный заголовок - это строка кода, которую вы размещаете сразу после открывающего тега <body>, который скрывает все, что в нем находится визуально. Делая это - вы можете иметь то, что вы хотите отобразить в предварительном просмотре электронной почты, не принимая какой-либо другой контент (например, просмотр в ссылках браузера).
<!--[if !mso]><!-->
<span style="display:none !important; visiblility:hidden; opacity:0px; color:transparent; height:0px; width:0px; mso-hide:all; max-height:0px; max-width:0px; line-height:0px; overflow:hidden;">Type your teaser content here.</span>
<!--<![endif]-->
В приведенном выше примере предварительного заголовка вы можете увидеть много разных вещей. Сначала у нас есть фрагмент <!--[if !mso]><!-->. Это гарантирует, что все, что заключено между этим и оператором <!--<![endif]-->, не будет отображаться в клиенте Microsoft. Это сделано из-за ограниченной поддержки CSS в Outlooks.
Далее у нас есть разносчик с различными элементами CSS, чтобы скрыть содержимое внутри него. Затем в тегах span содержится содержимое, которое вы хотели бы видеть в предварительном просмотре почтового клиента.