Javascript 段落中的嵌套跨距不会在子节点上换行，仅在父节点上换行

我正在开发一个python程序，该程序将拆分为节、标题和段落的文本文件转换为基于文本本身格式化的HTML文件。我遇到的一个问题是，我想让它突出显示单个单词，但当用户将鼠标移到句子上时，它周围有一个边框。最后，我希望这是某种工具提示。我遇到的主要问题是，

span

将不会被包装为。我尝试了

空白

和

显示

的每种组合，但问题仍然存在。当我只对每个句子使用一个

span

时，它起到了作用。它还可以消除句子

span class=“句子”“

全部删除，但这会删除鼠标悬停的内容

我正在使用jinja2生成这些HTML文件。生成每个节的代码是：

content.html

{%- block content -%}
    {%- for  c in content.children recursive -%}
        {%- if c.type=="heading" -%}
            <button type="button" class="item-heading item-heading-level1" id="{{ c.id }}">
                {{ c.text_content }}
            </button>
        {%- endif -%}
        <div class="doc-content-container" id="{{ c.id }}">
            {%- if c.type=="content" -%}
                <p class="doc-content">
                    {%- include "sentence.html" -%}
                </p>
            {%- endif -%}
            {{ loop(c.children) }}
        </div>
    {%- endfor -%}
{%- endblock -%}

---

在jinja代码中，即使在使用了

{%-%}

之后，我也遇到了空格问题，因此我尝试在插入单词时将空格添加到同一行。我尝试用python将句子中未标记单词的部分组合起来，但没有帮助。

如果我正确理解了您的要求，则删除

display:inline block的code>。句子

样式应该修复它

{%- for a in c.text_content -%}
    <span class="sentence"
          data-compound="{{ a.compound }}"
          data-pos="{{ (a.pos*100)|round(1) }}"
          data-neg="{{ (a.neg*100)|round(1) }}"
          data-neu="{{ (a.neu*100)|round(1) }}"
    >
        {%- for w in a.sentence -%}
            {%-if w.type == "PUNCT" -%}{{ w.word }}
            {%- else -%}
                {%- if loop.index > 1 %}{{ ' ' }}{% endif -%}
                {%- if w.use_span -%}
                    <span class="word-tagged" style="background-color: {{ w.color }};">{{ w.word }}</span>
                {%- else -%}
                    {{ w.word }}
                {%- endif -%}
            {%- endif -%}
        {%- endfor -%}
    </span>
{%- endfor -%}