网页渲染ASCII艺术空白丢失？Flask项目技术求助

问题描述 #

我使用Flask服务器（app.py）、存储ASCII艺术的Python文件（gameData.py）、CSS文件（style.css）及含Jinja语法的HTML模板（profile.html）搭建网页，用于展示玩家的宠物怪兽ASCII艺术，但渲染异常：

• 每行的部分空白字符被忽略

细节补充：

• ASCII艺术以列表形式存储，每行艺术对应列表的一个索引
• 该列表通过Jinja传入HTML模板
• 用Jinja循环遍历列表渲染每行

测试用ASCII图像：

[ 
"          ████████          ",
"        ██        ██        ",
"      ██▒▒▒▒        ██      ",
"    ██▒▒▒▒▒▒      ▒▒▒▒██    ",
"    ██▒▒▒▒▒▒      ▒▒▒▒██    ",
"  ██  ▒▒▒▒        ▒▒▒▒▒▒██  ",
"  ██                ▒▒▒▒██  ",
"██▒▒      ▒▒▒▒▒▒          ██",
"██      ▒▒▒▒▒▒▒▒▒▒        ██",
"██      ▒▒▒▒▒▒▒▒▒▒    ▒▒▒▒██",
"██▒▒▒▒  ▒▒▒▒▒▒▒▒▒▒  ▒▒▒▒▒▒██",
"  ██▒▒▒▒  ▒▒▒▒▒▒    ▒▒▒▒██  ",
"  ██▒▒▒▒            ▒▒▒▒██  ",
"    ██▒▒              ██    ",
"      ████        ████      ",
"          ████████          ",
"                            "
]

相关HTML/Jinja代码块：

<!-- Draw pet here -->
<div class="drawPet">
    {% for i in pet %}
        {{ i }}
    {% endfor %}
</div>

相关CSS代码块：

.drawPet {
    border: solid 2px black;
    text-align: center;
    color: black;
    white-space: pre;
}

已尝试过的操作：调整white-space属性值（pre、pre-wrap等）、更换HTML元素、直接渲染整个列表，均未解决问题。

解决方法 #

问题核心在于Jinja循环的空白干扰和非等宽字体导致的对齐错乱，按以下步骤修改即可修复：

1. 修正Jinja循环的输出格式 #

循环代码中的缩进会被当作额外空白插入每行内容前，破坏原始ASCII的空白结构。可以通过两种方式处理：

• 方式一：使用Jinja的空白控制标签{%- %}移除冗余空白，同时手动添加换行符

  <div class="drawPet">
      {%- for line in pet %}
          {{ line }}
          {%- if not loop.last %}{{ '\n' }}{% endif -%}
      {%- endfor %}
  </div>
  

• 方式二：在Flask视图层提前拼接字符串，简化模板逻辑
  在app.py中处理列表：

  from gameData import pet_ascii_list
  # 将列表拼接为带换行符的完整字符串
  pet_ascii = '\n'.join(pet_ascii_list)
  return render_template('profile.html', pet=pet_ascii)
  

  模板中直接输出：

  <div class="drawPet">{{ pet }}</div>
  

2. 调整CSS确保字符对齐 #

ASCII艺术必须用等宽字体才能保证每行字符对齐，同时调整居中方式避免干扰空白结构：

.drawPet {
    border: solid 2px black;
    color: black;
    white-space: pre;
    font-family: monospace; /* 核心：使用等宽字体 */
    width: fit-content; /* 容器适配内容宽度 */
    margin: 0 auto; /* 居中容器而非文本 */
}

3. 验证空白完整性 #

在Flask视图函数中打印任意一行的长度，比如print(len(pet_ascii_list[0]))，确认与原始字符串长度一致，确保空白字符未被意外截断。

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