Come troncare il testo fino a quando non si fa clic sul collegamento "altro"?

Question

Ho una lunga serie di paragrafi e vorrei ridurli a 2 righe (50 caratteri) e quando fai clic su un link "più" mostrerà il paragrafo completo.

Sto usando la libreria e le guide del prototipo.

Preferirei farlo senza suddividere il paragrafo in 2 div e mostrare l'altro quando fai clic su altro. O è l'unico modo?

Answer 1

Hai un problema con gli span? Sembra che il modo più efficace per impostare questo sia avvolgere l'eccesso in un tag di span nascosto. Puoi anche completare l'intera operazione in un metodo di supporto utile per renderlo riutilizzabile.

Supponendo il prototipo:

def sample_with_more(body, html_options = {})
  more_link = link_to_function(" More...", "$('more').hide(); $('hidden').show();', :id => 'more')


  content_tag(:div, html_options) do 
    body[0..49] + more_link + 
      content_tag(:span, body[50..-1], :style => "display:none", :id => "hidden")
  end
end

Answer 2

Metti il ??testo in un div e imposta l'altezza all'altezza desiderata (con overflow: nascosto). Quando si fa clic sul collegamento più, impostare l'altezza div su div.scrollHeight. Se stai usando jquery o mootools puoi lanciare una transizione ordinata.

<div id="myText" style="overflow:hidden; height:50px;">Text here...</div>
<a href="javascript:;" onclick="showMore()">more</a>

<script type="text/javascript">
function showMore() {
    var mydiv = document.getElementById('myText');
    mydiv.style.height = mydiv.scrollHeight; 
}

// or with a transition (mootools)
function showMoreTransition() {
    new Fx.Tween($('myText'), {
        duration: 1000
    }).start('height', $('myText').getScrollHeight());
}
</script>

Answer 3

Dato che sono un ragazzo di jQuery, ecco del codice psuedo

• Seleziona l'elemento che contiene p
• Seleziona dopo i primi 50 caratteri e avvolgi un div con una classe "più testo"
• Inserisci con Js dopo un <button>more</button>
• Aggiungi un pulsante evento click che imposta display: block o qualcosa di più fantasioso su more-text
• Rimuovi pulsante o modifica il testo in "meno" e modifica il codice necessario

Answer 4

Le risposte sopra riportate presuppongono che tu invii il testo completo al browser, quindi consenti di visualizzarne solo una certa quantità tagliandolo verticalmente. Questa è in realtà una buona idea, poiché troncare un testo dopo un certo numero di caratteri non è in realtà così semplice come sembra.

In un primo progetto, avevo un lungo elenco di testi troncati e non volevo inviarli tutti al browser per intero. La cosa importante da tenere a mente qui è se il tuo testo può contenere caratteri di controllo o di escape (ad es. HTML, BBCode, entità HTML, ecc.) Devi prenderti particolare cura di loro.

Ho finito per scrivere un piccolo parser di tag HTML per non fornire tag HTML tagliati a metà e per aggiungere tag finali ad es. grassetto, corsivo, ecc., per non rovinare il resto del layout dello schermo.

Inoltre, di solito non è quello che desideri, ovvero non otterrai due righe di testo per diverse larghezze dello schermo o quando nel testo sono presenti caratteri di interruzione di riga.