如何垂直对齐非等宽文本？非等宽字体双列左对齐异常问题

嘿，这个问题我之前帮不少开发者解决过——非等宽字体下用空格凑对齐确实是个坑，你的逻辑在等宽字体里完全没问题，但放到比例字体里就失效了，原因其实很简单：

为什么你的方法行不通？ #

非等宽字体（也就是常说的比例字体）里，每个字符的宽度都不一样：比如大写W的宽度可能是小写i的3倍，就连空格的宽度也不是固定的“单位”——它通常是当前字体基准字符（比如x）宽度的一半左右，和其他字符的宽度没有统一的比例关系。你用「第一列最大宽度 - 当前字符串宽度」再除以单个空格宽度的逻辑，默认了所有字符（包括空格）的宽度是可被统一计算的，但实际上，不同字符串的总宽度是一堆不同宽度字符的总和，用这种方式算出来的空格数根本没法精准让第一列的总宽度一致，自然对齐不了。

靠谱的解决方案 #

这里给你几个实用的方法，按推荐程度排序：

• 用Markdown表格（最推荐）
  这是最省心也最可靠的方式，因为Markdown表格的渲染逻辑会自动帮你处理列对齐，不管字体是不是等宽。比如你要展示的内容可以写成：

  | 第一列内容 | 第二列内容       |
  |------------|------------------|
  | a          | 12345678910      |
  | as         | 1234...          |
  

  渲染之后，两列会自动左对齐，完全不需要手动计算空格，而且在任何支持Markdown的平台上都能正常工作。

• 尝试全角空格替代半角空格
  如果因为某些原因不能用表格，你可以试试用全角空格（　，注意这不是普通空格）来填充。全角空格的宽度通常和一个全角字符一致，在很多比例字体里，它的宽度是半角字符的2倍，比半角空格的宽度更稳定，能在一定程度上改善对齐效果，但这种方法还是不如表格可靠，因为不同字体的全角空格宽度也可能有差异。

• 如果场景允许，换用等宽字体
  要是你的使用场景可以选择字体，那换回等宽字体（比如Consolas、Monaco），你的原始逻辑就完全生效了——等宽字体里每个字符（包括空格）的宽度都相同，计算出来的空格数能精准让第一列对齐。

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