如何在HTML电子邮件模板中获得div溢出的文本内容？

Question

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

我想要的是显示一个分数栏，它有点像进度条，里面有分数文字，如下所示：

此工作正常，直到分数变得非常低并且分数文本不再适合蓝色容器内部。文本就像这样切断：

和0％：

请注意，我不确定“＆＃34;得分”这个词为什么？仍然出现在最后一个。

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

我的代码如下：

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

任何想法如何解决这个问题，所以它适用于所有主要的电子邮件客户端和网络邮件客户端？

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>

不是很精致，但至少对于一个代码启动器来说它很好，我想

Answer 2

这是一个完全疯狂的解决方案。 ：）

我在这里写了SVG到CSS ...

http://jsfiddle.net/coqckyj9/1/

然后将SVG转换为base64并将其粘贴到div背景图像中......

http://jsfiddle.net/coqckyj9/2/

<div id='bar' style='width: 100px; height: 20px; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnPjxyZWN0IGZpbGw9J2JsdWUnIHdpZHRoPSc0cHgnIGhlaWdodD0nMjBweCcgLz48cmVjdCBmaWxsPSdyZWQnIHg9JzRweCcgIHdpZHRoPSc5NnB4JyBoZWlnaHQ9JzIwcHgnIC8+PHRleHQgeD0nMnB4JyB5PScxNnB4JyBmaWxsPSd3aGl0ZScgZm9udC1zaXplPScxOCc+U2NvcmUgNCU8L3RleHQ+PC9zdmc+);'></div>

Answer 3

您可以只使用两个div而无需定位。您必须使用white-space: nowrap来阻止文字包装。

示例代码段：

＆＃13;

＆＃13;

div.wrap {
    width: 100%; height: 26px; max-height: 26px; 
    background-color: #dd6666; color: #333;
    padding: 0px;
}
div.wrap > div {
    line-height: 26px; max-height: 26px;
    background-color: #3c88a7; padding: 0px 0px 0px 4px;
    width: 30%; white-space: nowrap; color: #fff;
    font-family: helvetica, sans-serif; font-size: 14px; font-weight: bold; 
}
div.d2 > div { width: 5%; }
div.d3 > div { width: 15%; }
div.d4 > div { width: 0%; }
div.d5 > div { width: 60%; }

＆＃13;

<div class="wrap d1">
    <div>Score 30%</div>
</div>
<br /><div class="wrap d2"><div>Score 5%</div></div>
<br /><div class="wrap d3"><div>Score 15%</div></div>
<br /><div class="wrap d4"><div>Score 0%</div></div>
<br /><div class="wrap d5"><div>Score 60%</div></div>

＆＃13;

＆＃13;

＆＃13;