Question

如何将每个字母设置为相同的宽度？我的意思是，如果我有这样的事情：

A B C S A A A A D D D S  
S S C A W I I I I A A A

现在的行数不相等，字母从不同的位置开始。我知道我可以使用JS来做到这一点，但是也许可以使用CSS来做到这一点？

已经尝试过flexbox，但是当我需要相同的开始和结束位置时，项目在中间对齐。

有人知道如何设置吗？

Answer 1

您可以使用monospaced font。

p {
  font-family: Monospace;
}

<p>ABCDEFGH</p>
<p>IJKLMNOP</p>

这是Google Fonts中可用的等宽字体的列表。

Answer 2

如果我看一下编辑器和blockquote之间的区别，它取决于字体。我看到了不同的结果，最大的区别是字体。

Stackoverflow编辑器中使用的字体是：

[Authorize]

如果使用与编辑器中相同的字体来制作块引用，则无论使用哪个字母，都将得到字母间距相同的结果。

D A S J X Q
K R D V B O

尝试在blockquote上添加上述字体。这是我的结果：

发生这种情况的原因是因为“ Consolas”是一种等宽字体，这意味着宽度和高度是固定的并且相同。因为编辑器中的字体是等宽字体，而块引用中的字体不是等宽字体，所以结果是不同的。

您可以在下面的链接中找到有关等宽字体的更多信息。 https://en.wikipedia.org/wiki/Monospaced_font