Wrap first letter and first sentence in span via jQuery

For each target element, this script will wrap the first letter and the first sentence of the text. This is particularly useful if you need to style Drop Caps or a leading sentence.

$('.myclass p').each(function(){
         // Split text at each period.
         var text = $(this).text().split('.');
         for( var i = 0; i < 1; i++ ) {
             // Wrap first letter in span.
             var first_letter = '<span class="first-letter">' + text[i].substr(0,1) + '</span>';
             // Wrap sentence in span.
             text[i] = '<span class="first-sentence">' + first_letter + text[i].substring(1, text[i].length) + '</span>';
         }
         $(this).html(text.join('.'));
      });

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.