Ricerca di testo (Ctrl + F) su intervalli nascosti

È ansible cercare il testo utilizzando la funzione Ctrl + F del browser su tre tag span se il tag centrale è impostato su nascosto? Per esempio:

 Trying to search text. 

Se .hiddenText è impostato per la display:none , il browser mostrerà “Tentativo di testo”. Se si esegue una ricerca utilizzando Ctrl + F in un browser Web, tuttavia, si interromperà la corrispondenza della stringa dopo “Tentativo”. Puoi evidenziare l’intera frase “Trying text” e premere Ctrl + F , che inserirà la frase nella tua casella di ricerca, ma facendo clic sul pulsante find-next-match non otterrai alcun risultato.

C’è un modo per rendere l’intera frase ricercabile? Per un esempio, controlla: http://jsfiddle.net/surrealmind/qo2ens33/ .

Questo funziona

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

HTML

 Trying 
to search
text

CSS

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

Anche questo funziona

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

HTML

 Trying to search text 

CSS

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

Non sono sicuro se questo è quello che stai cercando


Ok, penso che questo sia quello che stai cercando … Non puoi (per quanto ne so) cercare due span separati insieme, quindi quello che ho fatto è che ho aggiunto gli span visibili insieme

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

Utilizzando questo codice:

JS

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

Con questo puoi trovare “Cercando di cercare testo”. ma non “Tentativo di testo”:

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

dimostrazione

Questo non è esattamente quello che vuoi, ma realizza “testo nascosto”. Penso che il posizionamento potrebbe essere ottimizzato per il tuo scopo.

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