¿Cómo truncar el texto hasta que se haga clic en el enlace "más"?

Question

Tengo una larga serie de párrafos y me gustaría recortar cada uno hasta 2 líneas (50 caracteres) y al hacer clic en un enlace " más " mostrará el párrafo completo.

Estoy usando la biblioteca de prototipos y los rieles.

Lo ideal sería hacer esto sin dividir el párrafo en 2 divs y mostrar el otro al hacer clic en más. ¿O es esa la única manera?

Answer 1

¿Tienes algún problema con los spans? Parece que la forma más efectiva de configurar esto es envolver el exceso en una etiqueta oculta. Incluso puede envolver toda la operación en un buen método de ayuda para hacerlo reutilizable.

Suponiendo un 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

Coloque su texto en un div y ajuste la altura a la altura deseada (con desbordamiento: oculto). Cuando se hace clic en el enlace más, establezca la altura div en div.scrollHeight. Si está utilizando jquery o mootools puede lanzar una transición ordenada.

<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

Porque soy un chico de jQuery, aquí hay un código de psuedo

• Seleccione el elemento que contiene p
• Selecciona después de los primeros 50 caracteres y envuelve un div con una clase 'more-text'
• Insertar con Js después de un <button>more</button>
• Agregue un botón de evento de clic que establezca display: block o algo más sofisticado en el more-text
• Quitar botón o cambiar su texto a 'menos' y cambiar el código necesario

Answer 4

Las respuestas anteriores presuponen que envías el texto completo al navegador, luego permites que solo muestre una cierta cantidad recortándolo verticalmente. En realidad, es una buena idea, ya que truncar un texto después de una cierta cantidad de caracteres no es tan sencillo como parece.

En un proyecto inicial, tenía una larga lista de textos truncados y no quería enviarlos todos al navegador en toda su extensión. Lo importante a tener en cuenta aquí es que si su texto puede contener caracteres de control o de escape (por ejemplo, HTML, BBCode, HTML-Entities, etc.) debe tener especial cuidado con ellos.

Terminé escribiendo un pequeño analizador de etiquetas HTML para no entregar etiquetas HTML que se redujeron a la mitad, y para agregar etiquetas finales a, por ejemplo. negrita, cursiva, etc., para no arruinar el resto del diseño de la pantalla.

Además, generalmente no es lo que desea, es decir, no obtendrá dos líneas de texto para diferentes anchos de pantalla o cuando tenga caracteres de salto de línea en su texto.