Question

如果中间标记设置为隐藏，是否可以使用浏览器的 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 进行搜索，则会在“Trying”之后停止匹配字符串。您可以突出显示整个短语“尝试文本”并按 Ctrl + F ，这会将短语弹出到您的搜索框中，但点击查找下一个匹配按钮将没有结果。

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

Answer 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;
}

不确定这是否是您正在寻找的

好的，我认为这是你正在寻找的......你不能（据我所知）一起寻找两个不同的跨度，所以我所做的就是我和＃39; ve将可见范围加在一起

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

使用此代码：

<强> JS

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

Answer 2

通过这个，您可以找到＆＃34;尝试搜索文本。＆＃34;但不是＆＃34;尝试文字。＆＃34;：

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

Demo

Answer 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/

在隐藏的跨度中搜索文本（Ctrl + F）

3 个答案: