增加文本周围的可选区域

Question

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

例如，蓝色区域是用户可以突出显示以捕获“dolor” （当前可选区域）的唯一区域，但我希望它更宽松一些（增强的可选区域） ，如果用户开始选择增强的图片，他们会得到“dolor”而不是下面的词。

我已经尝试修改单词周围的边距和填充（ {padding: 10px; margin -10px ）：

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

该段落的当前 css：

paragraph {
  white-space: pre-wrap;
}

对于单个文本 div：

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

我怀疑 line-height 是什么让这变得困难，但我想保持 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。 它将文本移动到行的中间，并且顶部/底部间距均匀分布，从而增加了“可选性”。