Html 当一行中的文本较少时，无法对齐文本行

我正在为一封电子邮件编写HTML，目前电子邮件的一部分是这样的。问题是最后一行的对齐方式很奇怪。奇怪的是，我找到的唯一解决办法似乎是在最后一行添加更多文本。但我不喜欢这个解决方案

下面是用于在Chrome中创建上述输出的确切代码

<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="border: 1px solid #DDDDDD;background-color: #FFFFFF;" width="600">

<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 35px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0"> 
<tr>
  <td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
      <span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
  <span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">imperdiet</span>
    – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed porta, lacus dictum ornare elementum, magna eros cursus lectus, sed ullamcorper mi diam vehicula augue.
  </span> 
  </td>
</tr>  
</table>
</center>
</td>
</tr>

<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0"> 
<tr>
  <td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
    <span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
      <span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">Phasellus</span>
        – Vestibulum cursus elit vel urna lacinia feugiat. Maecenas vel varius eros. Maecenas vel mattis sem. Proin ac mauris quis elit suscipit tristique eu eu risus
    </span>  
  </td> 
</tr>
</table>
</center>
</td>
</tr>


<tr style="color: rgb(97, 97, 97); display: block; font-family: 'Proxima Nova'; font-size: 13px; font-weight: 400; line-height: 21px;">
<td style="padding-left: 18%; padding-right: 20%; padding-top: 10px; padding-bottom: 0px;">
<center>
<table style="border:0;" cellpadding="0" cellspacing="0"> 
<tr>
  <td align="left" style="padding: 0px; margin: 0px; font-family: sans-serif;">
    <span style="font-family: 'Proxima Nova', sans-serif !important; font-size: 13px; font-weight: 300;">
      <span style="color: rgb(107, 107, 207); font-size: 13px; font-weight: 400;">dictum</span>
        – Ut commodo tincidunt dictum. In hendrerit
      </span>
  </td>
</tr>   
</table>
</center>
</td>
</tr>
</table>

---

请注意，这不是普通的HTML，而是专门用于电子邮件的HTML，因此，如果将第一级元素设置为显示：block；它解决了您的问题。

为表格单元格添加一个设置宽度。这会解决你的问题

帝王饮食 –Lorem ipsum dolor sit amet，奉献精英。这是门，这是主旋律，这是主旋律，这是主旋律，这是主旋律。 Phasellus -前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭，前庭。梅塞纳斯·维尔·瓦里乌斯·厄罗斯。Maecenas vel mattis sem。这是一个很好的例子 格言 –这是一句名言。在亨德雷特

---

解决这个问题的另一种方法是将padding left:18%插入到表行tr标记中。由于更改填充不适用于data td标记，因此下一步要尝试的是移动被视为整行的内容。因此，格言部分的修订代码如下所示

格言 –这是一句名言。在亨德雷特。

---

不是答案，但您可以去掉和第二级表元素，只需将跨度保留在中，它对输出没有影响。您可能是对的，但实际上许多奇怪的标记都是由于outlook的电子邮件呈现。我需要在outlook中确认这些更改是否有效