Aplicar un estilo CSS a las primeras palabras de un texto con jQuery

Una pseudo clase que los diseñadores vienen solicitando desde hace tiempo, y que no termina de aparecer, es la que permite aplicar un estilo a las primeras palabras de un texto de forma automática. Esta pseudo clase se llamaría (si seguimos la linea de otras pseudo clases) :first-word(x), donde x sería el numero de palabras a las que se le aplicaría un estilo.

Lamentablemente :first-word(x) no existe, al menos hasta ahora, para solucionar esta falencia es que existe el plugin jQuery StyleWords.

StyleWords nos permite aplicar un estilo CSS a las primeras x palabras de un texto. Esto es realmente muy útil a la hora de dar un estilo a nuestros textos, utilizarlo es de lo más simple.

Ejemplo de uso:

<p>Lorem ipsum dolor sit amet.</p>
<script src="jquery.js"></script>
<script src="dist/jquery.styleWords.min.js"></script>
<script>
jQuery(function($) {
  $('p').styleWords(2);
});
</script>

Resultados:

<p><span class="styleWords">Lorem ipsum</span> dolor sit amet.</p>

Este plugin cuenta con varias opciones de configuración. Como podrán ver en el ejemplo, el plugin agrega un tag a las x primeras palabras de un determinado elemento, este tag puede ser fácilmente modificado, por ejemplo podemos elegir utilizar strong en lugar de span. Todas estas opciones están correctamente documentadas en el sitio oficial del plugin.

Web: styleWords

from Kabytes http://www.kabytes.com/programacion/aplicar-un-estilo-css-a-las-primeras-palabras-de-un-texto-con-jquery/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+kabytes+%28Kabytes%29

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: