段落中的嵌套跨度不会在子节点上换行，而只会在父节点上换行

Question

我正在研究一个python程序，该程序将拆分为节，标题和段落的文本文件转换为基于文本本身格式的HTML文件。我遇到的一个问题是，我想让它突出显示单个单词，但是当用户将鼠标悬停在句子上时，它周围有一个边框。最终，我希望它是某种工具提示。我遇到的主要问题是span"不会折断为shown at this jsfiddle。我已经尝试过whitespace和display的每种组合，但是问题仍然存在。当我每个句子只使用一个span时，它起作用了。它也可以完全摆脱句子span class="sentence"，但是可以删除鼠标悬停的内容。

我正在使用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 -%}

sentence.html

{%- 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 -%}

call_styles.css

.doc-content-container {
    margin: 10px;
    /*border: .5px solid black;*/
}

.sentence {
    word-wrap: normal;
    white-space: pre-line;
    border-color: transparent;
    border-width: 1px;
    border-style: solid;
    padding: 1px;
    display: inline-block;
    font-size: 12pt;
    width: auto;
    overflow: auto;
}

.doc-content {
    font-size: 12pt;
    font-weight: normal;
    text-align: left;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    line-height: 1.6;
    overflow: auto;
    display: block;
    white-space: pre-line;
}

.word-tagged {
    display: inline-block;
}

在Jinja代码中，即使使用{%- -%}后，我仍然遇到空格问题，因此我尝试将空格的添加与插入单词的行放在同一行。我在python中尝试将句子中没有标记单词的部分组合起来，但这没有帮助。

Answer 1

如果我正确理解了您想要的内容，那么从display: inline-block;样式中删除.sentence应该可以解决。