跨隐藏跨度搜索文本 (Ctrl+F)答案

【问题标题】：Searching for text (Ctrl+F) across hidden spans跨隐藏跨度搜索文本 (Ctrl+F)
【发布时间】：2016-11-15 07:24:02
【问题描述】：

如果中间标签设置为隐藏，是否可以使用浏览器的 Ctrl+F 功能跨三个span 标签搜索文本？例如：

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

如果 .hiddenText 设置为 display:none，网络浏览器将显示“正在尝试文本”。但是，如果您在 Web 浏览器中使用 Ctrl+F 进行搜索，您将停止匹配“正在尝试”之后的字符串。您可以突出显示整个短语“尝试文本”并按 Ctrl+F，这会将短语弹出到您的搜索框中，但单击 find-next-match 按钮将没有结果。

有什么方法可以让整个短语可搜索？例如，请查看：http://jsfiddle.net/surrealmind/qo2ens33/。

【问题讨论】：

对于“整个短语”，您的意思是“尝试文本”吗？或“尝试搜索文本。”？
“正在尝试文本。”对不起，好点：我应该更具体。
--感谢 ctwheels 提供了一种（已删除）在隐藏中间标签时获取“尝试搜索文本”的方法；我也不知道这是可能的。
抱歉，我删除了，修改后加回来

标签： html css firefox

【解决方案1】：

这行得通

http://jsfiddle.net/qo2ens33/2/

HTML

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

CSS

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

这也有效

http://jsfiddle.net/ctwheels/qo2ens33/5/

HTML

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

CSS

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

不确定这是不是你要找的东西

好的，我认为这就是您要寻找的...您不能（据我所知）一起搜索两个单独的跨度，所以我所做的是添加了可见跨度在一起

http://jsfiddle.net/ctwheels/qo2ens33/6/

使用此代码：

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

【讨论】：

谢谢，这些是查找“尝试搜索文本”的好方法。有没有什么好的方法可以找到删除“搜索”的“尝试文本”？
我在我的答案中添加了另一个答案，就像最后一个一样？
非常好，我们正在取得进展。理想情况下，我们不需要使用 JQuery，但看起来单独使用 css 和 html 可能是不可能的，是吗？最后一道皱纹呢？如果我们想将 .hiddenText 放回原处怎么办？如果我在重新排列后将 JQuery 设置为显示 .hiddenText，则以前隐藏的文本现在（显然）出现在行尾而不是原来的位置：jsfiddle.net/surrealmind/qo2ens33/7
你的意思是回到原来的句子（和看到的）？你能说得更具体点吗？
是的，要重新构建句子，就好像什么都没有隐藏一样：“尝试搜索文本”

【解决方案2】：

有了这个，您可以找到“尝试搜索文本”。但不是“尝试文本。”：

.hiddenText{
    position: absolute;
    top: -10000cm;
    left: -10000cm;
}

Demo

【讨论】：

谢谢你，Oriol；现在，如果我们只能找到“尝试文本”的方法。

【解决方案3】：

这并不完全是您想要的，但它确实完成了“隐藏文本”。我认为可以调整定位以适应您的目的。

.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);
}

http://jsfiddle.net/nbzv9thL/

【讨论】：