如何在HTML与CSS中正确对齐并显示ASCII艺术？

以下是针对ASCII艺术对齐混乱问题的精准修复步骤，覆盖你已尝试方法的遗漏点：

• 立即移除text-align: justify：这个属性会自动拉伸空格和字符间距，是破坏ASCII对齐的核心原因，必须彻底禁用，改用text-align: left（默认值）即可。

• 强制使用可靠的等宽字体栈：
  不要仅依赖monospace，不同系统默认等宽字体的字符宽度可能有细微差异，明确指定兼容性好的等宽字体：

  font-family: 'Consolas', 'Courier New', 'Lucida Console', monospace;
  

  用浏览器开发者工具检查元素的computed样式，确保字体没有被其他样式覆盖。

• 正确配置空白字符处理：

  • 若使用<pre>标签，它默认自带white-space: pre，但要禁用word-wrap: break-word和overflow-wrap: break-word，避免强制换行破坏布局；
  • 若使用<div>等容器，设置white-space: pre（严格保留换行和空格），不要用pre-wrap或pre-line，除非你需要自动换行但仍要保留空格对齐。

• 精准控制容器尺寸：

  • 给容器设置width: fit-content，让容器自适应ASCII艺术的最大行宽，避免容器过窄导致换行；
  • 如果ASCII行数较多或行宽固定，可用ch单位设置宽度（1ch等于当前字体下数字0的宽度），比如每行80字符就设width: 80ch；
  • 若内容超出视口，添加overflow-x: auto，让容器支持横向滚动，防止内容被截断或换行。

• 消除额外间距干扰：
  确保容器没有设置letter-spacing、word-spacing或text-indent，这些属性会改变字符间的默认距离，需显式重置：

  letter-spacing: 0;
  word-spacing: 0;
  text-indent: 0;
  

示例代码 #

<div class="ascii-container">
 _______
/       \
|   O O   |
|    ^    |
|   ---   |
 \_______/
</div>

.ascii-container {
  font-family: 'Consolas', 'Courier New', monospace;
  white-space: pre;
  width: fit-content;
  letter-spacing: 0;
  word-spacing: 0;
  text-align: left;
  word-break: normal;
  overflow-wrap: normal;
}

额外排查点 #

• 检查ASCII内容是否在复制粘贴时丢失了空格，或被编辑器自动替换为 （虽然等宽字体下 不影响，但原生空格更可靠）；
• 确保没有父元素的transform、scale等属性导致字符缩放变形。

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