文本/标签 xul xbl 部分中的文本阴影

Question

我有一堆名字的列表。作为用户类型，我想突出显示名称中的文本匹配项。 （除此之外：如果没有找到，我会显示“'rar' 没有匹配项”）。

这是我的目标图形模型：

用户输入了“rar”，并在名称中为匹配的“rar”添加了红色轮廓。我可以使用text-shadow: 0 0 1px red 在整个标签上完成此操作，但我无法在部分上完成。

我见过内容可编辑的 div http://html5demos.com/contenteditable 做到这一点。他们可以为范围赋予不同的字体颜色。我可以用 xbl html 文本框等替换 xul 标签。但我就是想不通。

谢谢

Answer 1

它们可以为范围赋予不同的字体颜色。

这些范围本质上被包裹到跨度或字体元素中，并且这些元素被设置样式。您可以通过创建一个Range()，在文本节点内设置它的开始和结束，然后使用range.surroundContents() 将其包装在一个临时节点中来实现拆分文本节点。

一旦您不再需要文本阴影，您就可以展开文本（只需将包装器替换为其内容）并normalize 文本节点以恢复原始状态。

也许有一些方法可以神奇地创建匿名框（例如 CSS 在内部用于线框），但我不知道如何为您指明该方法的正确方向。