Saludos esta vez vamos a ver el efecto leer mas jQuery con el plugin dotdotdot.js , hace tiempo habíamos visto este efecto en otra publicación similar pero con otro plugin jQuery.

Este plugin es bastante sencillo de integrar además que nos permite ajustar contenido dentro de una capa sin sobresalir del diseño de vuestras web’s.

La funcion de este plugin es mantener un contenido limpio, ya que muchas veces el contenido que esta adentro de una etiqueta se sale de los márgenes de su contenedor ocasionando mucho desastre dentro de la web.

La funcionalidad que jQuery dotdotdot nos brinda puede servir en cualquier sitio web, blog , aplicación web ya que el funcionamiento es con jQuery, podemos utilizarlo en cualquier sistema realizado en cualquier lenguaje de programación web que necesite mostrar contenidos limpios.

Este efecto leer mas jquery tiene como ejemplo funciones bastantes interesantes , una de ellas es onWindowResize que consiste en redimensionar la pantalla y la capa irá acortando texto sin necesidad de salirse del diseño.

Requisitos :

Necesitamos la librería jQuery desde sus CDN hosted alojados en todo el mundo, el archivo dotdotdot.js que podrás descargar desde su web, un poco de javascript y aplicar el efecto con un <div> , como es de esperarse este plugin es configurable.

Breve explicación:

Enlazamos los archivos de jQuery a utlizar:

<!--librerías jquery a utilizar-->
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.dotdotdot.js" type="text/javascript"></script>

Creando el javascript:

<script type="text/javascript" language="javascript">
    $(function() {
        $('#readmore').dotdotdot({
            after: 'a.readmore'
        });
    });
&/script>

Configuración del script a utilizar como mas le convenga..

$("#content").dotdotdot({
 /* Lo que mostramos a continuación del texto*/
  ellipsis : '... ',
  
 /* Cortando el texto 'word'/'letter'/'children' */
 wrap : 'word',
  
 /* retroceder a tamaño carta */
 fallbackToLetter: true,
  
 /* Contenido que quieres poner posterior al corte */
 after : null,
  
 /* Ver puntos */
 watch : false,
  
 /* Longitud en altura (parámetro min-height css) */
 height : null,
  
 /* Tolerancia de altura. */
 tolerance : 0,
  
 /* Eventos que se pueden desencadenar una vez cortado el contenido */
 callback : function( isTruncated, orgContent ) {},
  
 lastCharacter : {
  
 /* Remover los símbolos  */
 remove : [ ' ', ',', ';', '.', '!', '?' ],
  
 /* No agregar ellipsis a un conjunto de datos (Definidos por arreglos)*/
 noEllipsis : []
 }
 });

Utilzamos el id del script:

<div class="contenedor" id="readmore">
Contenido a mostrar por el usuario........
</div>

Su configuración es bastante sencilla ..

Web autor : dotdotdot.frebsite.nl/

Demostración: demo.bloguero-ec.com/efecto-leer-mas-jquery-plugin-dotdotdot/