How to Short Wordpress title in Frontend ?

Hi,
Today We will Show you How to Short your WordPress Title  in  Front-end   . Many Time we need Short Our wordpress Title  .  My One client Give me one PSD to convert into Wordpress . So When I complete there i saw some problem in Home page  , as some post title are going to too long . so Changed grid in Home page . this shown totally ugly . So I try solve this and solve this  .

if you want do this just Follow this 2 step ,

Step 1: this code paste in your loop

<?php if (strlen(the_title('','',FALSE)) > 50) { //Character length
          $title_short = substr(the_title('','',FALSE), 0, 50); // Character length
          preg_match('/^(.*)\s/s', $title_short, $matches);
      if ($matches[1]) $title_short = $matches[1];
          $title_short = $title_short.' ...'; // Ellipsis
      } else {
          $title_short = the_title('','',FALSE);
      } ?>

Step 2 : and Paste this where you want to show your title 

<?php echo $title_short ?>

See this Example  

<?php if(have_posts()) : ?>
                    <?php while (have_posts()) : the_post(); ?>       
                <div class="col-md-4 looppost">
                    <div class="post">
<?php if (strlen(the_title('','',FALSE)) > 50) { //Character length
          $title_short = substr(the_title('','',FALSE), 0, 50); // Character length
          preg_match('/^(.*)\s/s', $title_short, $matches);
      if ($matches[1]) $title_short = $matches[1];
          $title_short = $title_short.' ...'; // Ellipsis
      } else {
          $title_short = the_title('','',FALSE);
      } ?>
                        <h2><a href="<?php the_permalink()?> "><?php echo $title_short ?></a></h2>
                        <?php endwhile; ?>      <?php endif; ?>