如何在HTML页面中逐行显示Python列表内容？

首先纠正一个模板变量错误：你在app.py中传递给模板的变量是Lines（列表类型），但index.html里写的是{{Line}}，这会导致无法正确输出内容，需要先修正变量名。

以下是几种解决换行问题的可行方法：

方法1：利用<pre>标签保留原生换行 #

<pre>标签会保留文本中的换行符和空格，适合原样展示文件内容。只需把读取到的列表拼接成完整字符串传入模板，再放在<pre>中即可：

修改app.py的home函数：

@app.route('/')
def home():
    # 将列表拼接成带换行的完整字符串
    content = ''.join(lines)
    return render_template('index.html', server_url=BUGGY_RACE_SERVER_URL, content=content)

修改index.html的对应部分：

<pre>
  {{ content }}
</pre>

这样文件里的换行符\n会被<pre>标签解析为页面上的换行，不需要替换成<br>。

方法2：用Jinja2的safe过滤器渲染HTML标签 #

如果你想把换行换成<br>并让浏览器解析，需要关闭Flask的自动HTML转义（默认会把<>转义成实体字符，导致标签显示为文本）。

修改app.py的home函数：

@app.route('/')
def home():
    # 把每个行的换行符替换成<br>，再拼接成字符串
    content = '<br>'.join(line.rstrip('\n') for line in lines)
    return render_template('index.html', server_url=BUGGY_RACE_SERVER_URL, content=content)

修改index.html的对应部分：

<div>
  {{ content|safe }}
</div>

|safe过滤器告诉Jinja2这个内容是安全的HTML，不需要转义，浏览器就会把<br>解析为换行。

方法3：在模板中遍历列表逐行输出 #

直接在模板里遍历Lines列表，每行后面加<br>：

修改index.html的对应部分：

<div>
  {% for line in Lines %}
    {{ line.rstrip('\n') }}<br>
  {% endfor %}
</div>

这种方式不需要修改Python代码，直接在模板里处理每行的换行符，然后手动添加<br>实现换行。

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