我正在研究一个python程序,该程序将拆分为节,标题和段落的文本文件转换为基于文本本身格式的HTML文件。我遇到的一个问题是我想要使它突出显示单个单词,但是当用户将鼠标悬停在句子上时,它周围有一个边框。最终,我希望它是某种工具提示。我遇到的主要问题是span"
不会中断包装,如本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 -%}
句子.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
样式中删除应该可以解决问题。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句