Html 跨隐藏跨距搜索文本（Ctrl+；F）

如果中间标记设置为隐藏，是否可以使用浏览器的Ctrl+F功能在三个

span

标记之间搜索文本？例如：

<span class="visibleText">Trying</span>
<span class="hiddenText">to search</span>
<span class="visibleText">text.</span>

正在尝试
搜寻
文本。

如果

.hiddenText

设置为

显示：无

，则web浏览器将显示“正在尝试文本”。但是，如果在web浏览器中使用Ctrl+F进行搜索，则在“尝试”后将停止匹配字符串。您可以突出显示整个短语“Trying text”，然后按Ctrl+F组合键，这会将短语弹出到搜索框中，但单击“查找下一个匹配项”按钮将不会产生任何结果

有没有办法让整个短语都可以搜索？例如，请查看：。

使用此选项，您可以找到“尝试搜索文本”，但不能找到“尝试文本”：

这很有效

HTML

<span class="visibleText">Trying</span>
<div class="hiddenText"><span>to search</span></div>
<span class="visibleText">text</span>

<span class="visibleText">Trying</span>
<span class="hiddenText">to search</span>
<span class="visibleText">text</span>

---

这也行

HTML

<span class="visibleText">Trying</span>
<div class="hiddenText"><span>to search</span></div>
<span class="visibleText">text</span>

<span class="visibleText">Trying</span>
<span class="hiddenText">to search</span>
<span class="visibleText">text</span>

不确定这是否是你要找的

---

好的，我想这就是你要找的。。。你不能（据我所知）同时搜索两个独立的跨距，所以我所做的是将可见跨距添加到一起

使用此代码：

JS

.hiddenText{
    width:0px;
    height:0px;
    overflow:hidden;
    display:inline-block;
}

.hiddenText {
    position:absolute;
    opacity:0;
    width:0px;
}

var numberOfElements = $(".visibleText").length;
for (var i = 1; i < numberOfElements; i++) {
    $(".visibleText:eq(0)").append(" " + $(".visibleText:eq(1)").text());
    $(".visibleText:eq(1)").remove();
}

var numberOfElements=$（“.visibleText”）.length；
对于（var i=1；i

这并不是您想要的，但它确实实现了“隐藏文本”。我认为可以调整定位以符合您的目的

.parent {
  height: 2em;
  width: 400px;
  background: white;
  position: relative;
}

.hiddenText {
  width: 100%;
  overflow: visible;
  display: inline-block;
  position: absolute;
  color: transparent;
  bottom: 0;
  left: 0;
  cursor: default;
}
.hiddenText::selection {
  background: rgba(0,0,0,0);
}

---

对于“整个短语”，您是指“尝试文本”还是“尝试搜索文本？”？“尝试文本”。对不起，好的一点是：我应该更具体一些。--感谢ctwheels（自删除后）在隐藏中间标记时提供了一种获取“尝试搜索文本”的方法；我也不知道这是可能的。对不起，我删除了它，用编辑把它加了回去谢谢你，奥利奥；现在，如果我们能找到一种“尝试文本”的方法。谢谢，这些是找到“尝试搜索文本”的好方法。有没有什么好方法可以找到删除了“搜索”的“尝试文本”呢？我在我的答案中添加了另一个答案，就像上一个一样？很好，我们正在取得进展。理想情况下，我们不需要使用JQuery，但看起来仅仅使用css和html是不可能的，是吗？还有最后一条皱纹呢？如果我们想把.hiddenText放回原位呢？如果我在重新排列后将JQuery设置为显示.hiddenText，那么以前隐藏的文本现在（显然）会出现在行的末尾，而不是原来的位置：这样说，您的意思是像以前一样回到句子中（并看到）？你能说得更具体一点吗？是的，把句子重新组织起来，就像一开始什么都没有隐藏一样：“尝试搜索文本”