时间戳

首页 > 解决方案 > 在 HTML 电子邮件模板中缩进文本

html - 在 HTML 电子邮件模板中缩进文本

问题描述

我试图将 HTML 放置在不支持现代 HTML5 技术的旧供应商解决方案的电子邮件模板中。在代码示例（下面的 JSFiddle url）中，如果我调整模板大小并使其更小，则文本会落到下一行而没有缩进。

有没有办法在没有硬换行和缩进的情况下使文本缩进？

<div>
    <table style="background:#8B0000    ;color:#FFF;width:100%;font-size: 11pt;font-family: Arial;">
        <tr>
            <td width="10"></td>
            <td height="30">Test Email</td>
            <td align="right"></td>
            <td width="30"></td>
        </tr>
    </table>
    <table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
        <tr>
            <td width="10"></td>
            <td height="30"></td>
        </tr>
    </table>
    <table style="background:#D9D9D9;width:100%;font-family: Arial;">
        <tr style="background:#FFF">
            <td style="background:#D9D9D9"></td>
            <td height="30">
                <p style="font-size: 10.5pt;font-weight: 700;color:#555">&ensp; Test.</p>
                <div style="font-size: 10pt;color:#555">
                    <p>&ensp; There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
                </div>
            </td>
            <td style="background:#D9D9D9"></td>
        </tr>
    </table>
    <table style="background:#D9D9D9;color:#17375E;width:100%;font-size: 11pt;font-family: Arial;">
        <tr>
            <td></td>
            <td height="30"> </td>
        </tr>
    </table>
</div>

工作代码示例：https ://jsfiddle.net/wa1z4nvr/4/

标签： html

解决方案

看起来现在您正在使用 en-spaces 作为缩进&ensp; 这将产生一种行为，其中第一行似乎是缩进的，而其余的则没有。

如果您希望后续文本行与您的第一行对齐，那么您可能不是在寻找“缩进”。

您可以&ensp;从段落和“测试”中删除 。文本，并将 a 添加padding-left:1em到这些元素或包含它们的表格行。

包含测试文本的表可能如下所示：

<table style="background:#D9D9D9;width:100%;font-family: Arial;">
        <tr style="background:#FFF">
            <td style="background:#D9D9D9"></td>
            <td height="30" style="padding-left: 1em">
                <p style="font-size: 10.5pt;font-weight: 700;color:#555">Test.</p>
                <div style="font-size: 10pt;color:#555">
                    <p>There are pending items that require your review. Please see below are the details. The request must be approved or denied within 72 business hours or it will escalate to your manager. If you have questions regarding this email, call <b>1-555-555-5555</b>.</p>
                </div>
            </td>
            <td style="background:#D9D9D9"></td>
        </tr>
    </table>

推荐阅读