html - 电子邮件模板 - float 跨度的水平填充在换行符处被截断

Question

我正在努力构建电子邮件模板。使用 span 内联显示一些单词(试图避免 display 属性，因为某些 outlook 版本不支持它)出现 float 问题。

问题案例:包括填充在内的整个跨度不适合当前行，因此文本中断到下一行 - 现在没问题。不幸的是，“左”填充保留在第一行并被“切断”该元素，如您在此屏幕截图中所见。 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 上，也出现在其他几个电子邮件客户端上。)

Answer 1

您可以尝试改用表格，因为电子邮件客户端对大量其他标记和样式的支持是出了名的糟糕。 Chris Coyier 在此处有一篇关于响应式电子邮件的好文章 https://css-tricks.com/ideas-behind-responsive-emails/查看他指出的特别围绕 3 列的部分:

You might think: each of those will be a <td>. But no, if that was the case you'd never be able to get them to wrap in the limited CSS world of emails.

它看起来很恶心，但是，以下的一些变体可能会起作用 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>