Search for text (Ctrl + F) at hidden gaps

Question

Is it possible to search for text using the browser function Ctrl+ Fthrough three tags spanif the middle tag is set to hidden? For example:

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

If the parameter is .hiddenTextset to display:none“Trying text” appears in the web browser. However, if you perform a search using Ctrl+ Fin a web browser, you will stop string matching after "Trying". You can select the entire phrase “Try text” and press Ctrl+ F, which will display the phrase in the search field, but pressing the search button for the next match will not produce any results.

Is there a way to make this whole phrase searchable? For example, check: http://jsfiddle.net/surrealmind/qo2ens33/ .

Answer 1

It works

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

---

It works too

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

Not sure if this is what you are looking for

---

Well, I think this is what you are looking for ... You cannot (as far as I know) look for two separate spaces together, so I did, I added visible spaces together

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

Using this code:

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

With this, you can find "Text Search Attempt." but not "Trying text.":

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