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

Question

我正在开发一个 python 程序，该程序将分割为部分、标题和段落的文本文件转换为基于文本本身格式化的 HTML 文件。我遇到的问题之一是我想要突出显示单个单词，但是当用户将鼠标悬停在句子上时，它周围有边框。最终，我希望它是某种工具提示。我遇到的主要问题是 span" 不会中断换行为 shown at this jsfiddle 。我已经尝试了 whitespace 和 display，但问题仍然存在。当我每个句子只使用一个 span 时，它就起作用了。它也可以消除句子 span class="sentence"完全，但这消除了鼠标悬停的东西。

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

内容.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 -%}

句子.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

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