如何在HTML字符串中换行？Nunjucks模板渲染问题排查

你的问题出在两个核心点：

• Nunjucks默认开启自动转义，所以你写入的<br>会被转成<br>直接显示，不会被浏览器解析为换行标签；
• HTML本身不会把\n解析成换行，只会将其当作空格处理。

针对这两种场景，分别提供解决方案：

1. 使用HTML <br> 标签实现换行 #

给输出内容加上safe过滤器，告诉Nunjucks该字符串是安全的HTML代码，无需进行转义处理：

{% macro Function(strings) %}
   {% for item in strings %}
      <div>{{ item.string | safe }}</div>
   {% endfor %}
{% endmacro %}

{% set example = [
   {string: 'Hello,'},
   {string: 'it is<br>nice'},
   {string: 'to meet you!'}
]%}

{{ Function(strings=example)}}

渲染后，<br>会被浏览器正确解析为换行效果。

2. 使用换行符 \n 实现换行 #

有两种处理方式可选：

方式一：将\n替换为<br> #

用replace过滤器替换换行符，再配合safe过滤器让HTML生效：

{% macro Function(strings) %}
   {% for item in strings %}
      <div>{{ item.string | replace('\n', '<br>') | safe }}</div>
   {% endfor %}
{% endmacro %}

{% set example = [
   {string: 'Hello,'},
   {string: 'it is\nnice'},
   {string: 'to meet you!'}
]%}

{{ Function(strings=example)}}

方式二：通过CSS样式保留换行 #

给容器添加white-space: pre-line样式，让HTML自动识别\n为换行：

{% macro Function(strings) %}
   {% for item in strings %}
      <div style="white-space: pre-line;">{{ item.string }}</div>
   {% endfor %}
{% endmacro %}

{% set example = [
   {string: 'Hello,'},
   {string: 'it is\nnice'},
   {string: 'to meet you!'}
]%}

{{ Function(strings=example)}}

这种方法无需修改字符串内容，也不需要safe过滤器，适合纯文本换行的场景。

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