格式化爲在Outlook中顯示的HTML電子郵件 - 字間距問題

Question

我一直在試圖格式化電子郵件模板以使用跨客戶端。我嘗試了不同的框架，並且已經閱讀了有關兼容性問題的信息，特別是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> 

謝謝你的幫忙！

Answer 1

我不確定你的CSS在哪裏導致文本證明是正確的（你是否已經在頭部<style>？），但它看起來好像你試圖阻止它發生在本地，因爲你正在使用text-align:left; 。

text-align並不總是有效 - 在html電子郵件中，您應該改爲在您的<td>元素中使用。這將影響其中的所有內容。

例子：

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

Answer 2

在狹窄的HTML塊中進行全文對齊永遠不會看起來不錯。這與你的造型無關，而是文字調整算法的侷限性。

由於它不能打破字詞並使用連字符來包裝（正如您將在正確排版的雜誌和書籍中看到的那樣），您經常會遇到這個確切的問題。除非你有更寬的專欄，否則最好避免充分理由。

Answer 3

你嘗試留了對齊和垂直對齊頂部添加到TD，並設置寬度和高度？

更換所有的TD爲

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

同時，還必須建立一個顯示：塊的任何圖像

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

希望對大家有所幫助

Answer 4

你可以嘗試使用一個軟連字符：

­ 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 

一個­非常­長­字­將­休息­時­一個­軟­連字符­是­在­的­權­現貨­和­增加了添加­ ­ a ­破折號在­的­下一個­行­ ­到­突破­的­字­無­增加­太­多­破折號