Podtržení jednotlivých slov Triky CSS

Anonim

Neexistuje CSS pro použití podtržení ( text-decoration: underline;) pouze na jednotlivá slova ve víceslovném prvku. Nejlepším způsobem by bylo zabalit každé slovo v rozpětí (nikoli mezery, pouze slova) do rozpětí a na tyto rozpětí použít podtržení. Zde je jQuery, jak to udělat s h1prvky.

$('h1').each(function() ( var words = $(this).text().split(' '); $(this).empty().html(function() ( for (i = 0; i < words.length; i++) ( if (i == 0) ( $(this).append('' + words(i) + ''); ) else ( $(this).append(' ' + words(i) + ''); ) ) )); ));

Pak byste mohli udělat:

h1 span ( text-decoration: underline; )

Podobné a trochu robustnější řešení: Lettering.js