Javascript 增加文本周围的可选区域

我正在创建一个功能来搜索用户在页面上突出显示的文本。例如，UI可能有一段文本，用户将突出显示一个单词，该单词将自动启动对该单词的搜索。目前，他们必须在文本上准确突出显示，以便捕获/搜索术语。理想的效果是增加文本周围的“可选”区域，这样用户就不必如此精确

例如，蓝色区域是用户可以突出显示以捕获“dolor”的唯一区域 但我希望它能更宽容一点，如果用户开始在增强图片中选择like，他们会得到“dolor”，而不是下面的单词

我已经尝试过修改单词周围的边距和填充（

{padding:10px；margin-10px

）：

但它不会影响“可选”区域，在绿色区域开始选择仍然会捕获下面的单词

该段落的当前css：

paragraph {
  white-space: pre-wrap;
}

对于单个文本div：

text-div {
  font-size: 1.25em;
  line-height: 2em;
}

我怀疑行高是造成这一困难的原因，但我希望保持UI的外观不变。有什么javascript或css方法可以实现这一点吗

更新：

为了澄清，这里有一个更夸张的观点：

---

作为一个用户，我希望捕获dolor，但当我开始选择光标在图片中的位置时，它会选择下面的一行。

如果我正确理解问题，使用带负边距的填充组合，您可以实现所需。我添加了一个悬停状态，以便您可以在sn中看到可选区域例如，此处的面积有点夸张，但您可以根据需要进行修改

p{
空白：预包装；
}
.text div{
字体大小：粗体；
填充：2rem；
保证金：-2rem；
}
.text div：悬停{
背景色：rgba（100100，.5）；
}

奥雷姆·伊普斯姆·多洛·塞特，献祭精英。前庭和多洛·莫里斯。在性爱的节拍中，献祭者被诅咒了。佩伦特式的居住者莫比·特里斯蒂克·塞内特斯和内特斯·马莱苏达·埃吉斯塔斯。在梅特斯的征服者是佩伦特式的分子。在伊普斯姆·伊格斯塔斯之前，两人之间和马莱苏达·马莱苏达·马莱苏达·马莱苏达·马莱西在福西布斯（faucibus）中，他是一位智者，他是一位智者，他是一位智者。

我通过添加

vertical-align:middle

---

将文本元素移动到CSS。它将文本移动到行的中间，上/下间距均匀分布，从而增加了“可选择性”。

但是，如果他们想要选择下面的文本，而它选择了“dolor”，那么作为一个用户，我会感到非常沮丧。我想我是在尝试“均匀”地选择将空格分开，使两段之间的上半部分可以选择最上面的一行，但现在它抓住了最下面的一行。我在我的原始帖子中添加了一张夸张的图片。我不确定你试图实现的效果是否可以用纯css实现。你介意在解决方案中包含JS代码吗？一点也不介意，我是我想我需要用JS来解决这个问题，但不幸的是，我已经尝试过了，如果它想增加可点击链接的区域，但它并没有解决突出显示/选择问题，那么它是有效的。（如果有帮助的话，我在我的原始帖子中添加了一张澄清照片）。