JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#">Service Home</a></li>
    <li><a href="#">Service About</a></li>
</ul>

CSS

ul{
    padding:0;
    margin:0;
}
ul li{
    list-style:none;
    display:inline;
    float:left;
}
ul li a{
    padding:10px;
    background-color:yellow;
    float:left;
    text-decoration:none;
    font-family:Arial;
    width:50px;
    margin-right:2px;
    text-overflow:ellipsis;
    white-space:nowrap;
    overflow:hidden;
    display:block;
}

JavaScript

var items = $("ul li");
items.each(function(index, item){
   if($('a', item)[0].offsetWidth < $('a', item)[0].scrollWidth){
       
       //remove first word in all items tabs
       items.each(function(index, item){
           $('a', item).text($('a', item).text().split(" ").splice(1,1)[0]);
       });
       
       //break main each loop
       return false;
   }
});