4

So im using wordpress and i display title and that title is more than one word.So i need to add in first word font-family:'font1'; and in the rest of them to add font-family:'font2';. Any suggestion how can i do this?

  <div class="main-title"><span><?php echo the_title(); ?></span></div>
uzhas
  • 895
  • 4
  • 13
  • 27

1 Answers1

0

You need to look at index of the first space then add a specific class:

$('p').each(function() {
   var word = $(this).html();
   var index = word.indexOf(' ');
   if(index == -1) {
      index = word.length;
   }
   $(this).html('<span class="first-word">' + word.substring(0, index) + '</span>' + word.substring(index, word.length));
});

Then style the .first-word class

.first-word{
    font-family:'font1';
}

For more information, see http://webdesignerhut.com/style-first-letter-word-line-and-paragraph-with-css-and-jquery/

William
  • 740
  • 2
  • 11
  • 18