How to Delete First Word from <li> if the text overflows from it?

Question

I want to delete the first word from my <li> only if the text overflows from it.

Here is my nav bar

Any ideas?

Here is my code.

<div class="box-heading box-sections box-block">
    <div class="nav">
        <ul id="menu">
            <?php foreach ($products as $product){ ?>
            <li><a href="#Section<?php echo $product['product_id']; ?>"><?php echo $product['name']; ?></a></li>
            <?php } ?>
        </ul>
    </div>
</div>

I want my <li> to show ANIMALS, CARS, CITYSCAPE and delete "CUSTOM" from it.

Answer 1

Finally I've got the solution, is this the desired effect?

Fiddle

$('#menu li > a').each(function(){
    var element = $(this);
    if(element[0].offsetWidth < element[0].scrollWidth){
        $(this).text(element[0].innerText.split(' ').splice(1,1));
    }
});

Answer 2

If one menu item text exceed the given width, below program removes all the items first word from menu. fiddle

var items = $("#menu li a");

 items.each(function(index, item){
   if($(item)[0].offsetWidth < $(item)[0].scrollWidth){

   //remove first word in all items tabs
   items.each(function(index, item){
       $(item).text($(item).text().split(" ").splice(1,1)[0]);
   });

   //break main each loop
   return false;
   }
});