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

Question

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

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

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

很遗憾，我无法发布图片，因为我没有 10 个声誉。

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

这是 div 的结构(仅三个示例):

<div class="hanzi_with_pinyin"><div class="hanzi color4">获</div><div class="pinyins_div"><div class="pinyin_div color4">huo4</div></div></div>
<div class="hanzi_with_pinyin"><div class="hanzi">得</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">了</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">获</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">得</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">了</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