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

Question

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

问题案例：包括填充在内的整个跨度不适合当前行，因此文本会中断到下一行 - 现在没问题。不幸的是，"left" 填充保留在第一行并获得 "cut off" 项目，如您在此屏幕截图中所见。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>

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

e-mail templates - horizontal padding of floating spans cut off at linebreak

html

css

email

css-float

email-templates