Django中含空格的Tooltip使用i18n翻译失效问题求助

我在用i18n翻译HTML的Tooltip时遇到问题：当文本包含空格，使用{% translate ... %}标签后仅显示空格前的首个单词；将空格替换为下划线后则能完整显示。

无翻译标签的正常代码 #

<th scope="col">{% trans '% Name' %} <span class="tt" data-bs-placement="bottom" title= 'Some normal text (NT) with spaces.'><i class="bi bi-question-circle-fill hover-only" style="font-size: 1.2rem;"></i></span></th>

使用翻译标签后仅显示首个单词的代码 #

<th scope="col">{% trans '% Name' %} <span class="tt" data-bs-placement="bottom" title= {% translate 'Some normal text (NT) with spaces.' %}><i class="bi bi-question-circle-fill hover-only" style="font-size: 1.2rem;"></i></span></th>

替换空格为下划线后正常显示的代码 #

<th scope="col">{% trans '% Name' %} <span class="tt" data-bs-placement="bottom" title= {% translate 'Some_normal_text_(NT)_with_spaces.' %}><i class="bi bi-question-circle-fill hover-only" style="font-size: 1.2rem;"></i></span></th>

问题根源是HTML属性值未加引号。当翻译后的文本包含空格时，浏览器会将空格识别为属性值的结束标志，因此只解析到第一个空格前的内容。

只需给title属性的翻译结果添加引号（单引号或双引号均可，注意避免与标签内的引号冲突），就能让浏览器把整个翻译文本当作完整的属性值解析。

修正后的代码示例 #

<!-- 使用单引号包裹翻译结果 -->
<th scope="col">{% trans '% Name' %} <span class="tt" data-bs-placement="bottom" title='{% translate "Some normal text (NT) with spaces." %}'><i class="bi bi-question-circle-fill hover-only" style="font-size: 1.2rem;"></i></span></th>

或者：

<!-- 使用双引号包裹翻译结果 -->
<th scope="col">{% trans '% Name' %} <span class="tt" data-bs-placement="bottom" title="{% translate 'Some normal text (NT) with spaces.' %}"><i class="bi bi-question-circle-fill hover-only" style="font-size: 1.2rem;"></i></span></th>

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