電子郵件模板 - 水平填充的浮動跨度在行中斷

我在建立電子郵件模板。使用跨度顯示一些內聯字詞（試圖避免顯示屬性，因爲某些Outlook版本不支持它）會出現浮動問題。電子郵件模板 - 水平填充的浮動跨度在行中斷

問題情況：包括填充的整個跨度不適合當前行，因此文本分成下一行 - 現在罰款。儘管不幸的是「左」填充停留在第一行，並且可以「截斷」該項目，如您在此截圖中看到的那樣。 1

<span style=" line-height:25px; font-family:'Roboto', sans-serif; font-size:11px; background:#EBEBEB; border-radius: 8px;a padding: 3px 10px; margin:0;"> 
    Vollzeit 
</span> 
<span>&nbsp;</span>

我如何可以強制填充堅持使用文本並使其跳入下一行，太？（這個問題不僅發生在Outlook中，也發生在其他幾個電子郵件客戶端上。）

來源

2016-01-20 mariusb

您可能會嘗試使用表，因爲電子郵件客戶端已經非常討厭支持其他標記和樣式的廣泛色域。克里斯Coyier對響應電子郵件的好文章在這裏https://css-tricks.com/ideas-behind-responsive-emails/看那部專門圍繞3列，其中他說：

你可能會想：每個那些將是一個<td>。但是，不，如果是這種情況，你永遠無法讓他們包裝在有限的CSS電子郵件世界中。

這是令人討厭的，但看，下面的一些變化可能工作http://codepen.io/anon/pen/GoyojN

<table class="main-wrapping-table"> 
    <tr> 
     <td> 
      <table align="left" style="width: 33.33%"> 
      </table> 
      <table align="left" style="width: 33.33%"> 
      </table> 
      <table align="left" style="width: 33.33%"> 
      </table> 
     </td> 
    </tr> 
</table>

來源

2016-01-20 15:42:57 unpollo

電子郵件模板 - 水平填充的浮動跨度在行中斷

回答

相關問題