html - 调整html中文本或单词之间的空格

Question

我有一个问题是如何调整 html 中文本或单词之间的空格。我希望我的结果 2 “冒号”对齐可以调整同一行。

下面是我的示例代码:

<tr><td style="font-size:11px;">Name :</td></tr><br>
<tr><td style="font-size:11px;">Date &nbsp;<span style="word-spacing:80px;">:</span></td></tr>

现在我的结果对齐方式不能像这样:

我希望预期结果与下面相同:

我尝试使用 <p>替换 <span>调整对齐方式，但“冒号”会分解。希望有人能指导我如何解决这个问题。谢谢。

Answer 1

由于冒号用于视觉分隔而不具有任何意义，因此我会考虑将其插入到伪元素中而不是实际插入到 HTML 中。

此代码段将冒号放在紧接着的 td 之前，以确保冒号对齐。

td:nth-child(2)::before {
  content: ':';
}

<table>
  <tr>
    <td style="font-size:11px;">Name </td>
    <td></td>
  </tr><br>
  <tr>
    <td style="font-size:11px;">Date</td>
    <td></td>
  </tr>
</table>