Wie Text zu kürzen, bis „mehr“ Link geklickt wird?

Question

Ich habe eine lange Reihe von Absätzen und ich möchte jeden trimmen bis zu 2 Zeilen (50 Zeichen), und wenn Sie auf einen Link klicken Sie auf „mehr“ wird den vollen Absatz zeigen.

Ich bin mit der Prototyp-Bibliothek und Schienen.

Ich würde am liebsten, dies zu tun mit aus dem Absatz in 2 divs zu brechen und zeigte die andere, wenn Sie mehr klicken Sie auf. Oder ist das der einzige Weg?

Answer 1

Haben Sie ein Problem mit Spannweiten? Es scheint der effektivste Weg, diese eingerichtet ist, den Überschuss in einem versteckten span-Tag zu wickeln. Sie können sogar die ganze operationin eine nette Hilfsmethode wickeln, um es wiederverwendbar zu machen.

Unter der Annahme Prototyp:

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

Setzen Sie Ihren Text in einem div und stellen Sie die Höhe auf die gewünschte Höhe (mit overflow: hidden). Wenn die mehr Link geklickt wird, um die div Höhe div.scrollHeight eingestellt. Wenn Sie jquery oder Mootools verwenden können Sie in einem ordentlichen Übergang werfen.

<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

Weil ich ein jQuery Typ bin, hier einige Pseudo-Code

• Wählen Sie Element, das p
enthält
• Wählen Sie nach den ersten 50 Zeichen und wickeln Sie ein div um mit einer Klasse ‚mehr-Text‘
• Geben Sie mit Js nach einem <button>more</button>
• Fügen Sie ein Klick-Ereignis-Taste, die display: block oder etwas mehr Phantasie auf der more-text
setzt
• Schaltfläche entfernen oder es ist Text zu ändern, um ‚weniger‘ und notwendigen Code ändern

Answer 4

Die obigen Antworten an, dass Sie den vollständigen Text an den Browser senden, dann lassen Sie es nur eine bestimmte Menge davon anzeigen lassen, indem sie vertikal Clipping. Dies ist eigentlich eine gute Idee, wie ein Text afer eine bestimmte Menge von Zeichen Kürzen eigentlich nicht so geradlinig, wie es scheint.

In einem frühen Projekt hatte ich eine lange Liste von abgeschnittenen Texten und wollte sie nicht alle an den Browser in voller Länge zu senden. Wichtig ist hier im Auge zu behalten, wenn Ihre Text-Steuerelement enthalten kann oder Escape-Zeichen (z HTML, BBCode, HTML-Entitäten, etc.), die Sie besonders vorsichtig über sie nehmen.

ich am Ende einen kleinen HTML-Tag-Parser zu schreiben, um nicht HTML-Tags zu liefern, die in zwei Hälften geschnitten wurden, und End-Tags hinzufügen, um z.B. fett, kursiv, etc, um nicht den Rest des Bildschirmlayouts vermasseln.

Darüber hinaus ist es in der Regel nicht, was Sie wollen - das heißt nicht zwei Linien für unterschiedliche Bildschirmbreiten im Wert von Text erhalten wird oder wenn Zeichen Zeilenumbruch in Ihrem Text mit

.