如何在HTML中调整文本或单词间距实现多行冒号对齐？

你之前用硬加空格、固定word-spacing的方式适配性极差，不同字体、字号、页面缩放比例下都会出现错位问题，推荐以下两种适配性更强的实现方案：

方案1：基于现有表格结构优化（推荐，适配你当前的table代码） #

直接将每行拆分为两个td，第一个td固定宽度且设置内容右对齐，冒号直接跟在标签文本末尾即可，不要在tr标签之间插入<br>破坏表格布局，行间距可通过给td设置padding调整：

<tr>
  <td style="font-size:11px; width: 60px; text-align: right; padding: 4px 0;">Name:</td>
  <td style="font-size:11px; padding: 4px 0;">这里填写姓名内容</td>
</tr>
<tr>
  <td style="font-size:11px; width: 60px; text-align: right; padding: 4px 0;">Date:</td>
  <td style="font-size:11px; padding: 4px 0;">这里填写日期内容</td>
</tr>

方案2：单td场景实现 #

如果不想新增td节点，可给标签文本套inline-block属性的span，设置固定宽度+右对齐即可，不会出现冒号换行问题：

<tr>
  <td style="font-size:11px; padding: 4px 0;">
    <span style="display: inline-block; width: 60px; text-align: right;">Name:</span> 这里填写姓名内容
  </td>
</tr>
<tr>
  <td style="font-size:11px; padding: 4px 0;">
    <span style="display: inline-block; width: 60px; text-align: right;">Date:</span> 这里填写日期内容
  </td>
</tr>

以上两种方案的宽度值可根据你实际最长的标签文本长度调整，所有行的标签宽度保持一致即可保证冒号始终在同一垂直线上。

内容的提问来源于stack exchange，提问作者David Holly