Shrinking tabs with CSS & JS

by Nelu Malancea

HTML

<section class="tab-wrap">
	<a href="">Tab 1</a><a href="">Tab 2</a><a href="">Tab 3</a><a href="">Tab 4</a><a href="">Tab 5</a><a href="">Tab 6</a><a href="">Tab 7</a><a href="">Tab 8</a><a href="">Tab 9</a><a href="">Tab 10</a><a href="">Tab 11</a>
</section>

CSS

a {
    border: 1px solid grey;
    text-decoration: none;
    padding: 4px 7px;
    white-space: nowrap;
    overflow: hidden;
    /*text-overflow: ellipsis;*/
}

JavaScript

var fitTabs = function() {
    var count = $('.tab-wrap a').length;
    var tab_width_sum = 0;
    $('.tab-wrap a').each(function(){
        tab_width_sum += $(this).outerWidth();
    });
    
    if (tab_width_sum > $(window).width() ) {
        $('.tab-wrap').css({'display':'table','table-layout':'fixed','width':'100%'});
        $('.tab-wrap a').css('display','table-cell');
    }
}

$(document).ready(function(){
    fitTabs();
});
$(window).resize(function(){
    fitTabs();
});