Question

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

请考虑以下示例，这是余华小说《 To Live》的第一句话：我比现在年轻十岁的时候，获得了一个游手好闲的职业，去收集民间歌谣。

在第二个第三部分中，有三个字符“获得了”，可以构成单词“获得”或“得了”。为了说明这一点，我想在“获得”周围加上一个边框，在“得了”周围加上一个边框。

不幸的是，我没有10个声誉，因此无法发布图片。

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

这是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

即使边界交叉，也可以围绕任意相邻的div边框

1 个答案: