Question

我正在尝试将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/

Answer 1

删除ensp实体，并为您的段落添加所需的空白。

<p style="text-indent: 0; margin: 1em;">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>

Answer 2

现在看来您正在使用空格作为缩进&ensp; 这会导致第一行似乎缩进而其余行没有缩进的行为。

如果您希望后续的文本行与第一行对齐，那么您可能就不需要“缩进”。

您可以从段落和“测试”中删除&ensp;。文本，然后在这些元素或包含它们的表格行中添加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>

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

2 个答案: