如何在Django模板中换行长字符串且不影响渲染文本格式

直接在title属性值里换行会引入多余的空格和换行符，导致Tooltip显示异常。可以通过以下几种方式实现代码换行且不影响渲染效果：

方法一：使用Django 4.1+的{% capture %}标签（推荐） #

通过{% capture %}捕获Tooltip内容，配合{% spaceless %}去除多余空白，模板代码可以自由换行：

{% capture tooltip_content %}
{% spaceless %}
Comment: {{ material.comment|default:'' }}
{% if material.comment and material.location %}
Location: {% endif %}
{{ material.location|default:'' }}
{% endspaceless %}
{% endcapture %}

<abbr title="{{ tooltip_content }}">
  {{ material.name }}
</abbr>

{% spaceless %}会自动移除内容中的换行、缩进等多余空白，仅保留你需要的
换行标记。

方法二：拆分变量拼接（兼容低版本Django） #

将Tooltip内容拆分为多个部分，通过{% with %}标签拼接，代码结构更清晰：

{% with comment_section="Comment: "|add:material.comment|default:"" %}
{% with location_section=material.location|default:"" %}
{% with separator=material.comment|yesno:",
Location: " %}
{% with full_tooltip=comment_section|add:separator|add:location_section %}

<abbr title="{{ full_tooltip }}">
  {{ material.name }}
</abbr>

{% endwith %}
{% endwith %}
{% endwith %}
{% endwith %}

这种方式通过变量拆分逻辑，避免了单行代码过长，同时不会引入多余空白字符。

关键原因说明 #

直接在title属性内换行时，模板中的换行、缩进会被渲染为HTML属性值里的空格和换行符，导致Tooltip显示时出现不必要的空白，破坏原本的格式。上述方法通过模板标签处理，既能让代码换行提升可读性，又能保证渲染后的title属性值干净无多余空白。

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