增加文字

Question

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

例如，蓝色区域是用户可以突出显示以捕获“dolor”的唯一区域 (current selectable area) 但是我希望它更宽松一点(enhanced selectable area)如果用户开始选择增强图片，那么他们就会得到“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，但当我开始选择光标在图片中的位置时，它会选择下面的一行。

Answer 1

如果我正确理解了问题，使用带有负边距的填充的组合可以实现您正在寻找的内容。我添加了悬停状态，因此您可以在代码段中看到可选区域。这个区域有点夸张，但你可以根据自己的需要改变它。

p {
  white-space: pre-wrap;
}
.text-div {
  font-weight:bold;
  padding: 2rem;
  margin: -2rem;
}

.text-div:hover {
  background-color: rgba(100,100,100,.5);
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum et <span class='text-div'>dolor mauris</span>. Proin tempus eros est, cursus consectetur ante accumsan ut. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque in metus in metus pellentesque molestie eu vel lectus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque egestas accumsan sapien eget consequat. Cras porttitor enim eget tellus semper ornare.
</p>

Answer 2

我能够通过添加

来解决这个问题

vertical-align:middle

到文本元素的CSS。它将文本移动到行的中间，顶部/底部间距均匀分布，从而增加了可选性＆＃34;。