JSFiddle - React, Tailwind, and code Playground

HTML

<div id="page_site" style="width: 300px;"> <!-- ширина страницы сайта -->
	<div class="c_wrap" style="border: 1px solid #E6E6E6; height: 20px;">
		<div class="c_name" style="float: left;">1234567890абвгдежзик1234567890лмнопрст1234567890</div>
	</div>
</div>

CSS

.c_name {
  
  font-size:24px;
  
}

JavaScript

(function(){

	var cWrap = document.querySelector('.c_wrap'),
      c_name = document.querySelector('.c_name');
      
  (function req() {
     var checkWidth = function() {
       var cWrapWidth = cWrap.offsetWidth,
          c_nameWidth = c_name.offsetWidth;
       if (c_nameWidth > cWrapWidth) slice() && req();
     	 else {
         c_name.innerHTML = '...'+c_name.innerHTML;
         if (c_name.offsetWidth > cWrapWidth) {slice(true)};
       }
          
     }();
     
     function slice(flag) {
     	var text = c_name.innerHTML;
      (!flag) ? (text = text.substring(text.length,1)) : (text = text.replace(text[3],''));
     	c_name.innerHTML = text;
      return true;
     }
     
}());

}())