JSFiddle - React, Tailwind, and code Playground

by Graham Dixon

HTML

<div class="hozLineMenu" id="menu1">
    <div class="wrap">
        <div class="showMore"></div>
        <span> text </span>
        <span> text </span>
        <span> text </span>
        <span> text </span>
        <span> text </span>
        <span> text </span>
        <span> text </span>
        <span> text </span>
        <span> text </span>
        <span> text </span>
        <span> text not last </span>
        <span> text Second to last</span>
        <span> text Last </span>
    </div>
</div>
<div class="hozLineMenu" id="menu2">
    <div class="wrap">
        <div class="showMore"></div>
        <span> text </span>
        <span> text </span>
        <span> text </span>
        <span> text </span>
        <span> text </span>
        <span> text </span>
        <span> text not last </span>
        <span> text not last </span>
        <span> text not last </span>
        <span> text </span>
        <span> text </span>
        <span> text </span>
        <span> text not last </span>
        <span> text Second to last</span>
        <span> text Last </span>
    </div>
</div>

CSS

.hozLineMenu {
    position:relative;
    top:30px;
    padding-top:2px;
    margin:0px;
    height:30px;
    overflow:hidden;
    border:1px solid #bdbdbd;
    border-left:0px;
}
.wrap {
    width:100%;
}
.showMore {
    float:right;
    width: 10px;
    height:32px;
    background:#bbb;
    position:relative;
    top:-2px;
}
span {
    list-style-type: none;
    float:left;
    vertical-align:middle;
    height:32px;
    line-height: 32px;
    margin-top:-2px;
    padding-left:5px;
    padding-right:5px;
    border-left:1px solid #bbb;
}
#menu2{
    margin-top:-1px;
}

JavaScript

var checkFit = function(outsideEl){
    var divWid = $(outsideEl).outerWidth()-10;
    var insideEls = $("span", outsideEl);
    var spanWid = 0;
    var spansVis = [];
    var reList = [];
    var reListK = 0;
    $(insideEls).each(function(k){
        spanWid += $(this).outerWidth();
        if(divWid > spanWid) {
            spansVis[k] = 'visible';
        } else{ 
            spansVis[k] = false;
            reList[reListK] = this;
            reListK++;
        }
    });    
    if(reListK !== 0){
       //show the showmore button.  
        $('.showMore', $(outsideEl)).show();
       //add onClick to showMore with menu information (reList)
        $('.showMore', $(outsideEl)).off("click").on("click", function(){
            var text = "";
            $(reList).each(function(k, v){
                text += $(v).html()+"\n";
            });
            alert(text);
        });
    }else{
        $('.showMore', $(outsideEl)).hide();
    }
}

$(window).on("resize.checkFit", function(){
    checkFit($('#menu1'));
    checkFit($('#menu2'));
}).trigger("resize.checkFit");