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
