如何在Thymeleaf的th:each循环中保留DOM换行与空白字符？

问题根因 #

Thymeleaf 3.x版本默认开启了模板内容自动修剪配置，会移除模板中多余的空白字符、换行符，循环生成的相邻节点间的空白默认会被清除，因此会出现所有a标签连在一起的情况。

解决方案 #

方案1：全局配置保留空白（推荐） #

Spring Boot环境

直接在application.properties（或application.yml）中添加以下配置即可：

# 关闭模板空白字符自动修剪
spring.thymeleaf.trim-spaces = false
# 开发环境可关闭缓存方便测试
spring.thymeleaf.cache = false

如果是yaml格式的配置：

spring:
  thymeleaf:
    trim-spaces: false
    cache: false

普通Java Web环境

手动配置TemplateResolver时，关闭空白修剪开关：

SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
// 其他原有配置（前缀、后缀、编码等）保持不变
resolver.setTrimSpaces(false); // 核心配置
templateEngine.setTemplateResolver(resolver);

方案2：局部手动添加换行（不需要改全局配置） #

如果不想修改全局配置，也可以通过在循环块内手动输出换行符实现效果，修改模板代码如下：

<div>
  <th:block th:each="item : ${你的循环变量集合}">
    <a href="#" style="text-decoration: underline" th:text="${item.content}"></a>
    <!-- 手动插入换行符 -->
    <th:block th:text="'\n'"></th:block>
  </th:block>
</div>

修改完成后重新启动项目，即可得到带换行和空白的预期DOM结构。

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