javascript - 任意相邻 div 周围的边界，即使边界正在交叉

Question

我有一个中文句子，其中每个字符（及其拼音）都位于一个 div 中。现在不同的字符可以形成不同的单词，我想在字符周围创建边框以显示它们可能形成的单词。棘手的是，有时并不明显哪个单词真正形成，因此可能会出现交叉圆圈。

看下面这个例子，余华小说《活着》的第一句话：我比现在年轻了十几岁的时候，获得了一个游手好闲的职业，去乡间收集民间歌谣。</p>

第二个三分之一，有“获得了”三个字，可以组成“获得”或“得了”。为了表明这一点，我想要一个围绕“获得”的边框和一个围绕“得了”的边框。

不幸的是，我无法发布图片，因为我没有 10 名声望。

问题是我认为普通的 div 在这里是不够的，因为 div 会交叉，这是不可能的。表格布局很快就会变得过于复杂。我也不想使用 JavaScript 动态分配矩形，因为我想同时显示所有单词。也许 HTML5 画布是解决方案？

这是 div 的结构（仅三个示例）：

<div class="hanzi_with_pinyin"><div class="hanzi color4">获&lt;/div><div class="pinyins_div"><div class="pinyin_div color4">huo4</div></div></div>
<div class="hanzi_with_pinyin"><div class="hanzi">得&lt;/div><div class="pinyins_div"><div class="pinyin_div color2">de2</div><div class="pinyin_div color5">de5</div><div class="pinyin_div color3">dei3</div></div></div>
<div class="hanzi_with_pinyin"><div class="hanzi">了&lt;/div><div class="pinyins_div"><div class="pinyin_div color5">le5</div><div class="pinyin_div color3">liao3</div><div class="pinyin_div color4">liao4</div></div></div>

有没有一种简单的方法可以让我在相邻的 div 周围创建矩形，即使矩形是交叉的？

Answer 1

使用表格边框以及像这样的<tr>标签<th>。

https://www.html.am/html-codes/tables/table-border.cfm

例子：

<table border="1">
<tr>
<th><div class="hanzi_with_pinyin"><div class="hanzi color4">获&lt;/div><div class="pinyins_div"><div class="pinyin_div color4">huo4</div></div></div></th>
</tr>
<tr>
<td><div class="hanzi_with_pinyin"><div class="hanzi">得&lt;/div><div class="pinyins_div"><div class="pinyin_div color2">de2</div><div class="pinyin_div color5">de5</div><div class="pinyin_div color3">dei3</div></div></div></td>
</tr>
<tr>
<td>
<div class="hanzi_with_pinyin"><div class="hanzi">了&lt;/div><div class="pinyins_div"><div class="pinyin_div color5">le5</div><div class="pinyin_div color3">liao3</div><div class="pinyin_div color4">liao4</div></div></div></td></tr>
</table>

您也可以使用 css 边框进一步自定义它。

https://www.w3schools.com/css/css_border.asp