Mostra testo nascosto durante la ricerca

Question

Ho una tabella di dati con più colonne. Uno di questi è una colonna di commenti con lunghezza variabile del testo. Alcuni commenti sono molto brevi ma alcuni di essi possono essere piuttosto lunghi. Ora visualizzo solo i primi 50 caratteri del commento e inserisco il testo originale nell'attributo "titolo" in modo che gli utenti possano ancora leggere l'intero valore.

Troncando la stringa la tabella sembra ok ma ora gli utenti non riescono a trovare (CTRL + F nei browser) qualcosa nel resto del testo che è stato troncato.

Quindi la mia idea è di rendere l'intero commento nascosto nel codice sorgente ma visibile al meccanismo di ricerca del browser. È possibile in qualche modo? Cosa suggerite voi ragazzi?

Grazie!

Answer 1

Bene, ci pensiamo ... Che cosa fa il browser quando si utilizza la funzionalità di ricerca? Scorre al testo trovato e lo seleziona. Com'è possibile se il testo non è visibile? Non riesco a pensare a come possa funzionare. L'unica opzione che posso pensare è implementare la tua funzione di ricerca, ignorando quella del browser. Guarderebbe attraverso i commenti pubblicati e troverà il testo proprio come farebbe il browser, tranne che sarebbe in grado di guardare attraverso il testo nascosto e eventualmente espandendolo. Per quanto riguarda esattamente l'override della ricerca del browser, forse è possibile associare Ctrl + F e in tale associazione, return false per impedire che il browser utilizzi la sua ricerca. Non so se funzionerebbe, è solo un'idea. Come hai detto, il problema di base è che il browser non può cercare nel testo nascosto e non conosco alcun modo per farlo.

Answer 2

Non riesco a immaginare che sia possibile senza trucchi sporchi, come la dimensione del font: 0.1px o simile. È possibile fornire agli utenti la possibilità di visualizzare il testo a dimensione intera o implementare la propria funzione di ricerca per questo. perché un utente dovrebbe aspettarsi risultati utilizzando il motore di ricerca nativo su dati che non sono presenti per lui. si potrebbe legare a CTRL-F ma forse qualcuno ha cambiato la catena dei tasti o sta usando il menu, quindi questo è un vicolo cieco per me.

Answer 3

Non una buona risposta, ma bene: c'è un errore in Webkit e forse in altri motori. Se si imposta il testo su white-space: nowrap; e overflow: hidden;, esso verrà visivamente troncato ma verrà visualizzato di nuovo se è stata trovata una corrispondenza di ricerca nel testo nascosto.

Ho usato una tecnica simile da quando sei anni per nascondere il testo da pulsanti, che sono arredate con un'immagine di sfondo:

.button { 
    display: inline-block; 
    text-indent: 120%; 
    white-space: nowrap; 
} 

Answer 4

Hai bisogno di provare questo:

http://kineticjs.com/ 

è una buona biblioteca

Answer 5

soluzione semplice/divertente:

Impostare il commento container CSS per overflow:hidden; o overflow:scroll; e, se necessario, impostare larghezza e altezza per il contenitore. Dovrebbe mostrare solo una porzione di testo per gli utenti, ma può essere completamente leggibile dal browser.