Te propongo hacerlo así:
Código HTML:
Ver original<div class = "contenido"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
<div class = "contenido"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
Código CSS:
Ver original.contenido{
width: 25%;
height: 45px;
overflow: hidden;
}
Código Javascript
:
Ver originalvar texto, padre;
$(".contenido").each(function(){
texto = $(this).html();
this.setAttribute("data-texto", texto);
if ($(this).html().length > 75){
$(this)
.html(texto.substr(0, 75) + "...")
.append($("<label class = 'mas'>Ver más</label>"));
}
});
$(".mas").on("click", function(){
padre = $(this).parent();
texto = padre.data("texto");
$(padre)
.html(texto)
.css({
width: "50%",
height: "5rem"
});
});
El proceso es simple. Tengo dos
<div> (puedes tener uno o más) con la clase 'contenido'. Cada uno de ellos tiene un ancho del 25% de la ventana y 45 píxeles de alto, además, he ocultado las barras de desplazamiento para evitar el desbordamiento del texto.
En el código JavaScript, declaro a las variables
texto y
padre, las cuales serán usadas más adelante. Enseguida, tomo al conjunto de elementos cuya clase sea 'contenido' e itero sobre dicho conjunto. En cada iteración, tomo el contenido del elemento actual y asigno al
pseudo-atributo data-texto (puedes darle el nombre que quieras, como
data-ejemplo,
data-prueba), el valor que tomamos en la línea anterior, es decir, el texto original. Si la cantidad de caracteres que posee es mayor a 75 (por poner un ejemplo), lo recorto hasta precisamente 75 caracteres, le añado puntos suspensivos y una etiqueta
<label> con la clase 'mas' y el texto 'Ver más' y asigno todo esto al elemento actual en la iteración, mas no modifico el valor originalmente tomado y asignado a
texto.
Al darle clic a cualquier
<label> con la clase 'mas', tomo al elemento padre (el que lo contiene) y lo asigno a la variable
padre (una de las que declaré al inicio). De este elemento (el padre), tomo el valor de su pseudo-atributo
data-texto y lo asigno a la variable
texto (sí, la vuelvo a utilizar). A continuación, asigno como contenido al elemento padre, el texto que acabamos de obtener y modifico sus estilos para que sea más grande.
DEMO
Si deseas obtener el efecto contrario, es decir, reducir el tamaño del
<div> y acortar el texto, simplemente realiza el proceso contrario, añadiendo un botón al final del texto (cuando agrandes el
<div>) y, al darle clic, realizas el proceso de acortamiento del texto que hago al inicio en la condición.
Saludos
