[英]HTML email formatted to display in Outlook - word spacing issue
我一直在嘗試格式化電子郵件模板以跨客戶端工作。 我嘗試了不同的框架,並且閱讀了有關兼容性的問題,尤其是與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–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 » </a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
謝謝您的幫助!
狹窄的HTML文本中的全文對齊永遠不會看起來很好。 這與您的樣式無關,而是與文本對齊算法的局限性無關。
由於它不能斷詞並且使用連字符來包裝(如在正確排版的雜志和書籍中所看到的),您通常會遇到這個確切的問題。 除非您有更寬的欄目,否則最好避免完全對齊。
我不確定您的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>
您可以嘗試使用軟連字符:
­ 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
當在正確的位置添加軟連字符並添加破折號時,平均長字將中斷,而在擴展時不加任何破折號則破譯該單詞
您是否嘗試過向td添加左對齊和垂直對齊頂部並設置寬度和高度?
替換所有的TD
<td align="left" valign="top" width="value-image" height="value-image" > </td>
另外,您必須設置display:塊以顯示任何圖像
<img style="display:block;" height="value-image" width="value-image">
希望對您有所幫助
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.