使用空格对齐文本的等宽字体使它看起来很奇怪答案

【问题标题】：Monospaced font to align text using spaces makes it look odd使用空格对齐文本的等宽字体使它看起来很奇怪
【发布时间】：2015-05-15 01:49:34
【问题描述】：

我在我的页面中使用了默认的 html 字体 - Liberation Serif—30 glyphs。然后我遇到了一个问题，对齐两列文本的多个空格无法正常工作。

我发现，空格不会以与其他字符相同的宽度显示，因此相同数量的字符不会使用相同的宽度。所以，我开始使用等宽字体。它解决了对齐问题。

现在对齐看起来不错，但根据公司标准，字体不是常用的。

如何在使用 Liberation Serif 之类的字体的同时仍然使用空格字符进行对齐？

【问题讨论】：

mono标签不引用等宽文本；参考它的标签信息
你可以，但这是对齐文本的一种非常糟糕的方式。你应该找到一种更好的方式来对齐你的文本。

标签： css fonts monospace

【解决方案1】：

如果要在列中对齐文本，使用<table> 怎么样？或者如果不是表格数据，一些 CSS 和 float: left;。

【讨论】：

【解决方案2】：

要在 HTML 中使用等宽字体进行原始格式设置，您可以使用 <pre> ... </pre> 元素。事实上，这个标签会自动为你选择等宽字体：

<!-- the following shows the HTML, and the output will have the same column 
     formatting as it appears between the 'pre' tags -->
<pre>
      9      328
  2,345      208
    xyz        4
</pre>

<pre> 代表“保留”。您还可以将其作为 css 样式应用于其他类型的 HTML 标记。在这种情况下，您需要明确指定要使用的等宽字体（例如 Windows 上的“Consolas”）：

<div style='font-family:Consolas; white-space:pre;'>
      9        a
  2,345      quick
    xyz      f o x
</div>

确保您用于创建 HTML 文件的文本编辑器设置为插入 空格 字符。如果布局有任何 tab 字符或 tab 和 space 的混合，则浏览器中的布局可能看起来不一样。

此外，由于 <pre> 标记内的整个文本的列和行格式被完全保留，上面显示的示例将包括一个初始的“行break" 在第一行之前（与最后的换行符不同）你可能不想要。这是因为所包含的文本实际上在开始标记的 > 字符之后开始。有几种方法可以解决这个问题，留给读者作为练习。

【讨论】：