Indenting Text in HTML Email Template

Question

I am attempting to place HTML in an email template of an older vendor solution that doesn't support modern HTML5 techniques. In the code sample (JSFiddle url below) if I resize the template and make it smaller the text falls to the next line without an indent.

Is there a way to make the text indent without a hard line break and indenting?

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

Working code sample: 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

It looks like right now you're using en-spaces as your indent   This would create a behavior where the first line appears to be indented and the rest does not.

If you want subsequent lines of text to be lined up with your first line, then you're probably not looking for an "indent".

You can remove the   from both your paragraph and your "Test." text, and adding a padding-left:1em to those elements, or to the table row containing them.

The table containing your test text might look like this:

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