HTML电子邮件的格式设置为在Outlook中显示-单词间距问题

Question

我一直在尝试格式化电子邮件模板以跨客户端工作。 我尝试了不同的框架，并且阅读了有关兼容性的问题，尤其是与Outlook有关的问题。 尽管我已经能够格式化模板以使其在Outlook中很好地显示，但是仍然存在一个问题，即单词之间的间隔很大。 它并非在每个段落中都发生，并且似乎一次只出现一个或两个单词。 我已将此屏幕截图用作参考。 请注意“巧克力世界”部分下的免责声明文本。

这是该部分的代码，所有样式都是内联的。 是否存在任何可能导致此问题的内联样式的兼容性问题？

<table align="left" cellpadding="0" cellspacing="0" class="deviceWidth" style="width: 33%;">
<tbody>
<tr>
<td style="padding: 0 10px 20px 10px;" align="center" valign="top">
<p style="mso-table-lspace: 0; mso-table-rspace: 0; margin: 0;"><a href="#"><img align="left" alt="" border="0" class="deviceWidth" src="http://www.ctsciencecenter.org/cm_mailer/impact/chocolate-world-expo_impaCT.jpg" style=" width: 128px;padding:0px 0px 0px 10px;" width="128" /></a></p>
</td>
</tr>
<tr>
<td style="padding: 0 10px 20px 10px;"><a style="text-decoration: none; font-size: 16px; color: #333; font-weight: bold; font-family: Arial, sans-serif;" href="#">Chocolate World Expo</a>
<p style="color: #333; text-align: left; font-size: 12px; line-height: 24px;"><strong>April 27, 10AM&ndash;7PM<br />
 Special Member Pricing:<br />
$15 Adults, $10 Youth<br />
Coupon Code: Bonbon</strong></p>
<p style="color: #333; text-align: left; font-size: 12px; line-height: 24px;">Sample chocolate offerings, baked goods, cheeses and gelato that will perk up your taste buds. Enjoy a different treat with every step. All of these delicious items will be available for purchase! Visit <a href="http://thechocolateexpo.com/">Chocolate World Expo on the web</a> to find what you fancy.<br /><br /><strong style="font-size:11px;">Please note that we will be CLOSED to the public on April 27. Purchasing tickets in advance is highly recommended.</strong></p>
<table align="left" style="width: 90px;">
<tbody>
<tr>
<td style="padding: 10px 16px; background-color: #666; border-top: 1px solid #eee; background-repeat: repeat-x;" align="center" bgcolor="#666"><a style="color: #FFF; font-size: 12px; font-weight: bold; text-align: center; text-decoration: none; font-family: Arial, sans-serif; -webkit-text-size-adjust: none;">Tickets &raquo; </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

谢谢您的帮助！

Answer 1

狭窄的HTML文本中的全文对齐永远不会看起来很好。 这与您的样式无关，而是与文本对齐算法的局限性无关。

由于它不能断词并且使用连字符来包装（如在正确排版的杂志和书籍中所看到的），您通常会遇到这个确切的问题。 除非您有更宽的栏目，否则最好避免完全对齐。

Answer 2

我不确定您的CSS会在哪里导致文本对齐（您是否将它放在<style>头中？），但似乎您正在尝试防止在使用text-align:left;在本地发生它text-align:left; 。

text-align并不总是有效-在html电子邮件中，您应该在<td>元素中使用align="left" 。 这将影响其中的所有内容。

例：

<table width="600" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left">
      This text will align left
    </td>
  </tr>
</table>

Answer 3

您可以尝试使用软连字符：

­ or ­

长时间不能容纳在一列中的单词用破折号分成两部分。 该破折号可以放在句子的每个部分，并且仅在单词在该软连字符处中断时才会显示。

举这个例子：

a­very­long­word­will­break­when­a­soft­hyphen­is­added­at­the­right­spot­and­adds­a­dash­to­break­the­word­at­the­next­row­without­adding­too­much­dashes

当在正确的位置添加软连字符并添加破折号时，平均长字将中断，而在扩展时不加任何破折号则破译该单词

Answer 4

您是否尝试过向td添加左对齐和垂直对齐顶部并设置宽度和高度？

替换所有的TD

<td align="left" valign="top" width="value-image" height="value-image" >&nbsp;</td>

另外，您必须设置display：块以显示任何图像

<img style="display:block;" height="value-image" width="value-image">

希望对您有所帮助