0

Hola soy nueva en esto del código me gustaría saber si se puede reducir la longitud de un párrafo demasiado largo a la mitad y que al darle click encima del párrafo me despliegue el resto del texto, he visto varias opciones pero reducen el texto de manera horizontal y lo necesito vertical

alguien me podría ayudar con eso por favor??

<div>
<p> Nulla vitae erat tempor, iaculis eros et, tempus dolor. Donec sodales
 mattis dui, ut imperdiet est elementum eu. Vivamus et ipsum sit amet justo
 sagittis vestibulum. Donec laoreet cursus varius. Donec varius nibh ut
 sollicitudin semper. Vivamus ut augue ante. Praesent facilisis, turpis id
 porta varius, sem felis pretium est, eu euismod enim est nec mi. Mauris
 pharetra nisl et nisl ultricies, eu dictum lorem faucibus. Ut semper, ex ac
 hendrerit fringilla, massa magna finibus nisl, eget feugiat eros magna
 molestie ex. Maecenas pretium dapibus quam, non porta erat egestas non
. Pellentesque eget mauris mattis, tempus nisl quis, semper enim. Nam diam
 quam, tempus fringilla interdum id, suscipit vitae quam. Cras ultrices
 fermentum ultrices. Nam eget nisi pellentesque diam euismod fermentum. Cras
 porttitor turpis tellus, in elementum tellus vestibulum ac Nulla vitae erat
 tempor, iaculis eros et, tempus dolor. Donec sodales mattis dui, ut
 imperdiet est elementum eu. Vivamus et ipsum sit amet justo sagittis
 vestibulum. Donec laoreet cursus varius. Donec varius nibh ut sollicitudin
 semper. Vivamus ut augue ante. Praesent facilisis, turpis id porta varius,
 sem felis pretium est, eu euismod enim est nec mi. Mauris pharetra nisl et
 nisl ultricies, eu dictum lorem faucibus. Ut semper, ex ac hendrerit
 fringilla, massa magna finibus nisl, eget feugiat eros magna molestie ex.
 Maecenas pretium dapibus quam, non porta erat egestas non. Pellentesque
 eget mauris mattis, tempus nisl quis, semper enim. Nam diam quam, tempus
 fringilla interdum id, suscipit vitae quam. Cras ultrices fermentum
 ultrices. Nam eget nisi pellentesque diam euismod fermentum. Cras porttitor
 turpis tellus, in elementum tellus vestibulum acNulla vitae erat tempor,
 iaculis eros et, tempus dolor. Donec sodales mattis dui, ut imperdiet est
 elementum eu. Vivamus et ipsum sit amet justo sagittis vestibulum. Donec
 laoreet cursus varius. Donec varius nibh ut sollicitudin semper. Vivamus ut
 augue ante. Praesent facilisis, turpis id porta varius, sem felis pretium
 est, eu euismod enim est nec mi. Mauris pharetra nisl et nisl ultricies
 Ut semper, ex ac hendrerit fringilla, massa magna
 finibus nisl, eget feugiat eros magna molestie ex. Maecenas pretium dapibus
 quam, non porta erat egestas non. Pellentesque eget mauris mattis, tempus
 nisl quis, semper enim. Nam diam quam, tempus fringilla interdum id,
 suscipit vitae quam. Cras ultrices fermentum ultrices. Nam eget nisi
 pellentesque diam euismod fermentum. Cras porttitor turpis tellus, in
 elementum tellus vestibulum ac.<p>
<div>
2
  • Por favor incluye lo que has intentado/investigado hasta el momento. Un ejemplo de cómo lo estás intentando hacer nos ayudaría a poder guiarte mejor Commented el 28 ene. 2022 a las 2:18
  • Buen día, bienvenido(a) a la comunidad, como menciona el comentario anterior, es importante incluir siempre lo que has intentado para saber como ayudarte de una mejor forma. Podrías revisar los acordiones sirven para desplegar información y normalmente funcionan de forma vertical Commented el 28 ene. 2022 a las 2:23

3 respuestas 3

2

Podrias intentar darle una altura predefinida al p y ponerle un overflow-y: hidden por css y cuando pase encima, cambiar la altura a auto, pero la altura no quedaria dinamicamente a la mitad del texto, aunque con un poquito de javascript podrias asignarle exactamente la mitad:

   <style>
 #test{
    overflow-y: hidden;
 }
 
 .show {
    height:auto !important;
 }
 </style>

<div>
<p id="test" onclick="this.classList.toggle('show')" onmouseout="this.classList.remove('show')"> Nulla vitae erat tempor, iaculis eros et, tempus dolor. Donec sodales
 mattis dui, ut imperdiet est elementum eu. Vivamus et ipsum sit amet justo
 sagittis vestibulum. Donec laoreet cursus varius. Donec varius nibh ut
 sollicitudin semper. Vivamus ut augue ante. Praesent facilisis, turpis id
 porta varius, sem felis pretium est, eu euismod enim est nec mi. Mauris
 pharetra nisl et nisl ultricies, eu dictum lorem faucibus. Ut semper, ex ac
 hendrerit fringilla, massa magna finibus nisl, eget feugiat eros magna
 molestie ex. Maecenas pretium dapibus quam, non porta erat egestas non
. Pellentesque eget mauris mattis, tempus nisl quis, semper enim. Nam diam
 quam, tempus fringilla interdum id, suscipit vitae quam. Cras ultrices
 fermentum ultrices. Nam eget nisi pellentesque diam euismod fermentum. Cras
 porttitor turpis tellus, in elementum tellus vestibulum ac Nulla vitae erat
 tempor, iaculis eros et, tempus dolor. Donec sodales mattis dui, ut
 imperdiet est elementum eu. Vivamus et ipsum sit amet justo sagittis
 vestibulum. Donec laoreet cursus varius. Donec varius nibh ut sollicitudin
 semper. Vivamus ut augue ante. Praesent facilisis, turpis id porta varius,
 sem felis pretium est, eu euismod enim est nec mi. Mauris pharetra nisl et
 nisl ultricies, eu dictum lorem faucibus. Ut semper, ex ac hendrerit
 fringilla, massa magna finibus nisl, eget feugiat eros magna molestie ex.
 Maecenas pretium dapibus quam, non porta erat egestas non. Pellentesque
 eget mauris mattis, tempus nisl quis, semper enim. Nam diam quam, tempus
 fringilla interdum id, suscipit vitae quam. Cras ultrices fermentum
 ultrices. Nam eget nisi pellentesque diam euismod fermentum. Cras porttitor
 turpis tellus, in elementum tellus vestibulum acNulla vitae erat tempor,
 iaculis eros et, tempus dolor. Donec sodales mattis dui, ut imperdiet est
 elementum eu. Vivamus et ipsum sit amet justo sagittis vestibulum. Donec
 laoreet cursus varius. Donec varius nibh ut sollicitudin semper. Vivamus ut
 augue ante. Praesent facilisis, turpis id porta varius, sem felis pretium
 est, eu euismod enim est nec mi. Mauris pharetra nisl et nisl ultricies
 Ut semper, ex ac hendrerit fringilla, massa magna
 finibus nisl, eget feugiat eros magna molestie ex. Maecenas pretium dapibus
 quam, non porta erat egestas non. Pellentesque eget mauris mattis, tempus
 nisl quis, semper enim. Nam diam quam, tempus fringilla interdum id,
 suscipit vitae quam. Cras ultrices fermentum ultrices. Nam eget nisi
 pellentesque diam euismod fermentum. Cras porttitor turpis tellus, in
 elementum tellus vestibulum ac.<p>
<div>

<script>
document.getElementById("test").style.height = document.getElementById("test").offsetHeight /2;

</script>
3
  • Hola @StialManstike es lo que busco! pero me gustaria saber como cambiarlo de que se abra al pasar el mouse por encima a que mejor se muestre al darle un clic al texto
    – Aly
    Commented el 28 ene. 2022 a las 3:46
  • Hola @Alayna te actualice el codigo en la respuesta, a ver si es lo que necesitas. Commented el 28 ene. 2022 a las 4:21
  • Para explicar un poco, pase el css que expande el texto a una clase y en el agregue el atributo onclick sobre p que lo que hace es dispararse cuando se le hace click, ahi puse que agregue la clase .show al elemento(o la quite si ya existe) , tambien agregue que cuando el mouse se salga del texto le quite esa clase, para que se contraiga de nuevo. Commented el 28 ene. 2022 a las 4:26
1

Usando JavaScript (no Java) y JQuery, tengo una funcion que me ayuda a tener ese "leer menos" y "leer mas" que implemento en unos bloques de texto.

En el script se define la longitud del texto a mostrar y luego solo se agrega una clase que con CSS mando a mostrar o ocultar el bloque.

Para implementarlo, agrego la clase "show-read-more" al elemento que contiene el texto, en este caso el parrafo.

Para el que busque una funcion similar espero les sirva.

$(document).ready(function(){

function readmore() {
    //Maximo de caracteres a mostrar
    let maxLength = 250;
            
    $(".show-read-more").each(function(){
      let myStr = $(this).text().trim();            
      
      if(myStr.length > maxLength){
        let str = "...mas";
        let newStr = myStr.substring(0, maxLength);
        let removedStr = myStr.substring(maxLength, myStr.length);
        $(this).text(newStr);
        $(this).append('<a href="#" class="read-more">...mas</a>');
        $(this).append('<span class="hidden-text">' + removedStr + '</span>');
      }
    });
    
    $(".show-read-more").on("click", ".read-more", function(evt){
      evt.preventDefault();
      let str = '...mas';
      let myStr = $(this).text().trim();
      let newStr = myStr.substring(0, maxLength);
      $(this).parent().addClass("expanded");
      $(this).text(newStr);
      $(this).siblings(".hidden-text").contents().unwrap();
      $(this).parent().append('<a href="#" class="show-less">...menos</a>');
      $(this).remove();
    });
    
    $(".show-read-more").on("click", ".show-less", function(evt){
      evt.preventDefault();
      let myStr = $(this).parent().text().trim();
      if(myStr.length > maxLength){
        let str = '...menos';
        let newStr = myStr.substring(0, maxLength);
        let removedStr = myStr.substring(maxLength, (myStr.length - str.length));
        let thisParent = $(this).parent();
        thisParent.text(newStr);
        thisParent.append('<a href="#" class="read-more">...mas</a>');
        thisParent.append('<span class="hidden-text">' + removedStr + '</span>');
      }
    });
  }
  
  readmore();
});
body {
  font-family: Arial, sans-serif;
}

 .show-read-more {
   max-height: 75px; /*para evitar el "salto" inicial */
   overflow: hidden;
 }

.show-read-more.expanded {
  max-height: 100%;
  overflow: auto;
}

.hidden-text {
  display: none;
}

   a {
 color: red; /* para resaltar el efecto */
}
<p class="show-read-more">
Nulla vitae erat tempor, iaculis eros et, tempus dolor. Donec sodales
 mattis dui, ut imperdiet est elementum eu. Vivamus et ipsum sit amet justo
 sagittis vestibulum. Donec laoreet cursus varius. Donec varius nibh ut
 sollicitudin semper. Vivamus ut augue ante. Praesent facilisis, turpis id
 porta varius, sem felis pretium est, eu euismod enim est nec mi. Mauris
 pharetra nisl et nisl ultricies, eu dictum lorem faucibus. Ut semper, ex ac
 hendrerit fringilla, massa magna finibus nisl, eget feugiat eros magna
 molestie ex. Maecenas pretium dapibus quam, non porta erat egestas non
. Pellentesque eget mauris mattis, tempus nisl quis, semper enim. Nam diam
 quam, tempus fringilla interdum id, suscipit vitae quam. Cras ultrices
 fermentum ultrices. Nam eget nisi pellentesque diam euismod fermentum. Cras
 porttitor turpis tellus, in elementum tellus vestibulum ac Nulla vitae erat
 tempor, iaculis eros et, tempus dolor. Donec sodales mattis dui, ut
 imperdiet est elementum eu. Vivamus et ipsum sit amet justo sagittis
 vestibulum. Donec laoreet cursus varius. Donec varius nibh ut sollicitudin
 semper. Vivamus ut augue ante. Praesent facilisis, turpis id porta varius,
 sem felis pretium est, eu euismod enim est nec mi. Mauris pharetra nisl et
 nisl ultricies, eu dictum lorem faucibus. Ut semper, ex ac hendrerit
 fringilla, massa magna finibus nisl, eget feugiat eros magna molestie ex.
 Maecenas pretium dapibus quam, non porta erat egestas non. Pellentesque
 eget mauris mattis, tempus nisl quis, semper enim. Nam diam quam, tempus
 fringilla interdum id, suscipit vitae quam. Cras ultrices fermentum
 ultrices. Nam eget nisi pellentesque diam euismod fermentum. Cras porttitor
 turpis tellus, in elementum tellus vestibulum acNulla vitae erat tempor,
 iaculis eros et, tempus dolor. Donec sodales mattis dui, ut imperdiet est
 elementum eu. Vivamus et ipsum sit amet justo sagittis vestibulum. Donec
 laoreet cursus varius. Donec varius nibh ut sollicitudin semper. Vivamus ut
 augue ante. Praesent facilisis, turpis id porta varius, sem felis pretium
 est, eu euismod enim est nec mi. Mauris pharetra nisl et nisl ultricies
 Ut semper, ex ac hendrerit fringilla, massa magna
 finibus nisl, eget feugiat eros magna molestie ex. Maecenas pretium dapibus
 quam, non porta erat egestas non. Pellentesque eget mauris mattis, tempus
 nisl quis, semper enim. Nam diam quam, tempus fringilla interdum id,
 suscipit vitae quam. Cras ultrices fermentum ultrices. Nam eget nisi
 pellentesque diam euismod fermentum. Cras porttitor turpis tellus, in
 elementum tellus vestibulum ac.
</p>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

0

Puedes usar <details> y <summary>.

Tomando el texto que colocaste como ejemplo te quedaria algo similar a:

<details>
    <summary style="display: block;">
        Nulla vitae erat tempor, iaculis eros et, tempus dolor. Donec sodales
        mattis dui, ut imperdiet est elementum eu. Vivamus et ipsum sit amet justo
        sagittis vestibulum. Donec laoreet cursus varius. Donec varius nibh ut
        sollicitudin semper. Vivamus ut augue ante. Praesent facilisis, turpis id
        porta varius, sem felis pretium est, eu euismod enim est nec mi. Mauris
        pharetra nisl et nisl ultricies, eu dictum lorem faucibus. Ut semper, ex ac
        hendrerit fringilla, massa magna finibus nisl, eget feugiat eros magna
        molestie ex. Maecenas pretium dapibus quam, non porta erat egestas non.
    </summary>


        Pellentesque eget mauris mattis, tempus nisl quis, semper enim. Nam diam
        quam, tempus fringilla interdum id, suscipit vitae quam. Cras ultrices
        fermentum ultrices. Nam eget nisi pellentesque diam euismod fermentum. Cras
        porttitor turpis tellus, in elementum tellus vestibulum ac Nulla vitae erat
        tempor, iaculis eros et, tempus dolor. Donec sodales mattis dui, ut
        imperdiet est elementum eu. Vivamus et ipsum sit amet justo sagittis
        vestibulum. Donec laoreet cursus varius. Donec varius nibh ut sollicitudin
        semper. Vivamus ut augue ante. Praesent facilisis, turpis id porta varius,
        sem felis pretium est, eu euismod enim est nec mi. Mauris pharetra nisl et
        nisl ultricies, eu dictum lorem faucibus. Ut semper, ex ac hendrerit
        fringilla, massa magna finibus nisl, eget feugiat eros magna molestie ex.
        Maecenas pretium dapibus quam, non porta erat egestas non. Pellentesque
        eget mauris mattis, tempus nisl quis, semper enim. Nam diam quam, tempus
        fringilla interdum id, suscipit vitae quam. Cras ultrices fermentum
        ultrices. Nam eget nisi pellentesque diam euismod fermentum. Cras porttitor
        turpis tellus, in elementum tellus vestibulum acNulla vitae erat tempor,
        iaculis eros et, tempus dolor. Donec sodales mattis dui, ut imperdiet est
        elementum eu. Vivamus et ipsum sit amet justo sagittis vestibulum. Donec
        laoreet cursus varius. Donec varius nibh ut sollicitudin semper. Vivamus ut
        augue ante. Praesent facilisis, turpis id porta varius, sem felis pretium
        est, eu euismod enim est nec mi. Mauris pharetra nisl et nisl ultricies
        Ut semper, ex ac hendrerit fringilla, massa magna
        finibus nisl, eget feugiat eros magna molestie ex. Maecenas pretium dapibus
        quam, non porta erat egestas non. Pellentesque eget mauris mattis, tempus
        nisl quis, semper enim. Nam diam quam, tempus fringilla interdum id,
        suscipit vitae quam. Cras ultrices fermentum ultrices. Nam eget nisi
        pellentesque diam euismod fermentum. Cras porttitor turpis tellus, in
        elementum tellus vestibulum ac.

</details>

El display: block; es para que no muestre el > antes del resumen.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.