格式化为在Outlook中显示的HTML电子邮件 - 字间距问题

时间:2014-04-10 19:35:43

标签: html css email outlook

我一直试图将电子邮件模板格式化为跨客户端。我尝试过不同的框架,并且我已经阅读了有关兼容性问题的信息,尤其是Outlook。虽然我已经能够格式化模板以在Outlook中很好地显示,但我仍然存在一个问题,即单词之间存在大的空格。它不会发生在每个段落中,而且似乎一次只发生一两个单词。我已将此screenshot作为参考。 请注意巧克力世界'下的免责声明文字。部分。

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

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

感谢您的帮助!

4 个答案:

答案 0 :(得分:1)

HTML的窄块中的全文理由永远不会好看。这与您的样式无关,而是文本对齐算法的局限性。

由于它无法破解单词并使用连字符进行换行(正如您在正确排版的杂志和书籍中看到的那样),您经常会遇到这个问题。除非你有更宽的列,否则最好避免完全合理化。

答案 1 :(得分:1)

我不确定你的CSS在哪里导致文本证明是合理的(你是否在脑中<style>?),但看起来好像你试图阻止它在本地发生正在使用text-align:left;

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

示例:

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

答案 2 :(得分:1)

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

&#173; or &shy;

要使用短划线将长到适合列的单词分成两个。 这个短划线可以放在句子的每个部分,只有当单词在那个软连字符处断开时才会显示。

这个例子:

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

averylongwordwillbreakwhenasofthyphenisaddedattherightspotandaddsadashtobreakthewordatthenextrowwithoutaddingtoomuchdashes

答案 3 :(得分:0)

您是否尝试在td上添加左对齐和垂直对齐顶部并设置宽度和高度?

替换

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

此外,您必须设置display:block for any image

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

我希望能提供帮助