JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<div class="container">
    <ul>
        <li>Item 001</li>
        <li>Item 002</li>
        <li>Item 003</li>
        <li>Item 004</li>
        <li>Item 005</li>
        <li>Item 006</li>
        <li>Item 007</li>
    </ul>
</div>

CSS

*{
	margin: 0px;
	
}
.container {
	width: 500px;
	background-color: blue;
	height:50px;
}

ul {
	width:500px;
	height:30px;
    text-align: center;
    font-size: 20px;
    background-color: red;
	padding:0px;
}  

ul li {
	width:auto;
	text-align:center;
	background-color:#993;
	float:left;
	list-style-type: none;
}

JavaScript

function decrease () {
	var count=0
	function recursor(count){
			var containerW=$('.container').width()
			var liW=$('.container li').width()
			console.log(liW)
			var nuberLinks=$('.container li').length
			var total=liW*nuberLinks
            if(total>=containerW){
			   $('.container ul').css({'font-size':20-count+'px'})
			    count++
				recursor(count)
			}
	};
	recursor(0);
};

 	
decrease();