JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu2">Varah avahah anhen cashier eh beynun Varah avahah anhen cashier eh beynun</div>

CSS

#menu2 {
    background-color: green;
}

#menu2.f-nav {
    background-color: red;
}

JavaScript

function checkWidth() {
    if ($(window).width() < 700) {
        $('#menu2').addClass('f-nav');
        $("#menu2").each(function(i){
        len=$(this).text().length;
           if(len>30)
            {
              $(this).text($(this).text().substr(0,30)+'...');
            }
  		})
    } else{
        $('#menu2').removeClass('f-nav');
        $("#menu2").each(function(i){
        $(this).text($(this).data('originalTxt'));
  		});
    }
}
$("#menu2").each(function(){
        $(this).data({originalTxt: $(this).text()});
});
$(window).resize(checkWidth);