5

我有一个使用<mark>标签以交互方式突出显示文本的应用程序。当用户拖动鼠标时，它会包裹和展开文档中的文本节点以向用户显示选择。当所选范围在单词中间结束时，标记仅围绕单词的一部分。如果边界在紧缩对之间，则紧缩被禁用。

这是一个例子：

p { font-size: 30pt; margin: 0; line-height: 26pt; }
<p>There <mark>are 1</mark>1 entries.</p>
<p>There are 11 entries.</p>

在第一段中，<mark> 标签在两个“1”数字之间结束。第二段具有相同的文本，但没有 <mark>。调整字体大小、边距和行距以使段落更接近，从而使差异更加明显。

带 <mark> 的 1 之间的空间比不带的多。由于这在应用程序中以交互方式发生，当用户将鼠标拖动到 1 上时，随后的文本会在它们位于 1 之间时向右移动，然后在超过下一个字符时返回。文本的“抖动”可能很烦人。

有没有办法告诉浏览器不要将标记标签视为字距调整边界？也许是字体功能设置？

4

3 回答 3

2

好吧，您可以完全关闭字距调整...我认为这是您最接近看不到效果的情况，因为字距调整边界将始终位于标签边界处。

p { font-size: 30pt; margin: 0; line-height: 26pt; font-kerning: none; }
mark { margin: 0; font-kerning: none; }
<p>There <mark>are 1</mark>1 entries.</p>
<p>There are 11 entries.</p>

于 2016-04-06T17:00:26.320 回答
1

考虑使用::selection伪元素来控制所选文本的突出显示。

如果您想插入mark标签，您可以在选择过程完成后执行此操作。那时，您将失去标签边界处的字距调整，但至少您不会看到用户选择时的抖动。

::selection {
  background-color: yellow;
}
There are 11 entries.<br/>
There are 11 entries.

于 2016-04-13T17:18:07.907 回答
0

我一直在一遍又一遍地寻找关于它的“清理”修复，但我只找到了一种处理margin财产的方法。

看一下这个

mark { margin: 0 -1pt; }

希望能帮助到你

于 2016-04-06T16:35:47.503 回答