html - 如何让 HTML 电子邮件模板中的 div 文本内容溢出？

Question

我正在处理这个 HTML 电子邮件模板，并认为我已经完成了，直到我发现 GMail 和其他一些电子邮件客户端删除了 position CSS 属性。由于为电子邮件阅读器编写 html/css 就像回到石器时代一样，我有点卡在这个时代。

我想要的是显示一个类似于进度条的分数栏，其中包含一个分数文本，如下所示:

在分数变得非常低并且分数文本不再适合蓝色容器之前，这一切正常。文本就这样被截断了:

在 0% 时:

请注意，我不确定为什么“Score”这个词仍然出现在最后一个中。

我想要的是，当文本太长无法放入蓝色容器时，乐谱文本只是重叠到红色部分。

我的代码如下:

<div style="float: left;width: 70%;height: 30px;max-height: 30px;background-color: #f00;color: #fff;font-weight: bold;padding: 0px;font-size: 18px;">
        <div style="float: left;width: 0%;height: 30px;max-height: 30px;margin: 0;padding: 0;background-color: #3c88a7;overflow: visible;">
            <div style="padding-left: 10px; float: left;line-height: 30px;max-height: 30px;">Score 0%</div>
        </div>
</div>

我也尝试过用表格来解决它，但我遇到了同样的问题——似乎没有跨平台的方法可以让文本溢出单元格。

有什么办法可以解决这个问题，让它适用于所有主要的电子邮件客户端和网络邮件客户端吗？

Answer 1

就这么简单:

<div style="margin:0;padding:0;background:blue">
    <p style="width:10%;background:red;color:white;white-space: nowrap;">Score: 10%</p>
</div>

不是很完美，但我想至少对于代码初学者来说还不错