突出显示文本的重叠范围

Question

我希望使用 CSS 背景底纹来注释 HTML 中的一些文本。

但是，这些区域可能会相互重叠。

在此示例中，我希望将“Jim，Alex，Dunedin”的背景着色为黄色，然后将“Dunedin, 184.3”的背景着色为蓝色。在这种情况下，“但尼丁”元素将呈现绿色阴影。

我很确定这在 HTML 中是不可能的，因为我认为 span 元素不能重叠。

对于这个问题还有其他解决方案吗？

Answer 1

注意：最后我通过分析数据并为每个不同阴影的块生成不同的跨度解决了问题。

如此有效，我的代码产生了：

<span class='yellow'>Jim, Alex, </span><span class='yellow-blue'>Dunedin, </span><span class='blue'> 184.3</span>

它通过创建一个数组数组来实现此目的，其中文本中的每个字符都有一个单元格。在分析文本时，对于每个字符，它将在该单元格的数组中添加“该字符的样式”。然后，代码执行并为共享相同样式的每组连续单元格分配一个跨度。

用于执行此操作的 Python 代码位于此处，这里是突出显示的输出的示例，尽管在此示例中没有重叠区域。