disign.it | Sottolineare singole parole | a digital sign for a best design!
A digital sign for a best design
Css tips and tricks 2.536 visualizzazioni

Sottolineare singole parole

22/07/2013

La regola css text-decoration: underline; non permette la sottolineatura delle singole parole ma applica il sottolinetao anche agli spazi compresi nel testo, e non esiste alternativa CSS per farlo.

Come spesso accade ci viene in aiuto la libreria Jqury per ovviare alla bisogna !

Nell'esempio utilizziamo un tag H6 a cui far apllicare automaticamente la sottolineatura per singola parola.

Dopo aver fatto la classica chiamata alla libreria Jquery più aggiornata, come descritto in questo articolo, definiamo la function al document ready

 

$('h6').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] + '');
			}
		}
	
	});

});

infine nel nostro CSS ricordiamoci di inserire la regola


h1 span { text-decoration: underline; }

← Jquery: al click muovere in alto elemento lista Visualizzare su un altro sito i più recenti upload Flickr →

Invia una domanda o un commento sull'articolo

I campi obbligatori sono segnalati *

*

*



 

© 2009 - 2017 Impronte digitali di Luca Frassineti. Tutti i diritti riservati.