javascript - 段落中的嵌套跨度不会包裹在子节点上,只会包裹在父节点上
问题描述
我正在开发一个 python 程序,它将拆分为部分、标题和段落的文本文件转换为基于文本本身格式化的 HTML 文件。我遇到的一个问题是我想要它以便突出显示单个单词,但是当用户将鼠标悬停在句子上时,它周围有一个边框。最终,我希望它是某种工具提示。我遇到的主要问题是span"
不会像这个 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 中组合句子中未标记单词的部分,但没有帮助。
解决方案
如果我正确理解您想要什么,那么display: inline-block;
从.sentence
样式中删除应该可以解决它。
推荐阅读
- matlab - 一次但独立地控制子图字体属性
- vuejs2 - 变异时Vuex没有反应
- php - 我移动了我的 xampp 文件夹,因为我的 Windows 崩溃了 - 现在我想恢复我的旧项目
- bus - AXI Bus 安全相关协议
- python - numpy shape[::-1] 中的参数 -1 是什么意思?
- html - 在图像中嵌入上一个和下一个按钮
- query-builder - 在池 TypeORM queryBuilder 上调用 end 后无法使用池
- javascript - 使用 Jest 转换符号链接模块
- python - qtablewidget 为添加的行设置可编辑的水平标题标签
- javascript - 查找平行或偏移 SVG 路径