JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div id="mobYaz">
    
</div>

<div id="windowSize"></div>

CSS

#mobYaz{
    max-width:100px;
    max-height:20px;
    white-space: nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
    background-color:green;    
}

#windowSize{
    width:100px;
    height:20px;
    background-color:red;
    margin-top:20px;    
}

JavaScript

$(document).ready(function(){  
    $('#windowSize').html($(window).width());
    $('#mobYaz').html($('#mobYaz').width());
    
    if($(window).width() > 539)
    {
        if($(window).width() > 539 && $(window).width()<559 )
        {
            alert("screensize is between 539 and 559");
            $('#mobYaz').css('width','115px');
        }
        if($(window).width() > 559 && $(window).width()<579 )
        {
            alert("screensize is between 559 and 579");
            $('#mobYaz').css('width','135px');
        }
        if($(window).width() > 579 && $(window).width()<599 )
        {
            alert("screensize is between 579 and 599");
            $('#mobYaz').css('width','155px');
        }
        if($(window).width() > 599 && $(window).width()<699 )
        {
            alert("screensize is greater than 599");
            $('#mobYaz').css('width','175px');
        }       
    }   
});



$(window).on('resize', function(){
    $('#windowSize').html($(window).width());
    $('#mobYaz').html($('#mobYaz').width());
});