<div class="container">
  <ul class="conversion__list">
    <li><a href="" class="conversion__link conversion__link--active">title 1</a></li>
    <li><a href="" class="conversion__link">title 2</a></li>
    <li><a href="" class="conversion__link">title 3</a></li>
    <li><a href="" class="conversion__link">title 4</a></li>
    <li><a href="" class="conversion__link">title 5</a></li>
    <li><a href="" class="conversion__link">super long title 6</a></li>
  </ul>
</div>

.conversion__list {
  position: relative;
  display: flex;
  align-items: center;
}


ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li:not(:last-child){
  /*margin-right: 20px;*/

}

a {
  display: block;
  text-decoration: none;
}

.container {
  max-width: 100%;
  width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  outline: 1px solid red;
}



.conversion__link  {
  white-space: nowrap;
  padding: 5px 20px;
}
.menu-dots {
  position: relative;
}
.menu-dots ul {
  position: absolute;
  right: 0;
}

$(window).on('load', function() {
  setMenu();
});
$(window).on('resize', function() {
  setMenu();
});
function setMenu(){
  // console.log($(window).width());

  const MAX_WIDTH_MENU = $(window).width() - 40;
  var totalWidthMenu = 0;
  var counter = 0;

  $('.conversion__list > li').each(function(i, e) {
    totalWidthMenu += $(e).width();
    if (totalWidthMenu >= MAX_WIDTH_MENU) {
      counter++;
      if(counter == 1) {
        $('.conversion__list').append('<div class="menu-dots"><a href="">...</a><ul></ul></div>');
      }
      $('.menu-dots > ul').append( $(e)[0].outerHTML );
      $(e).remove();
    }
  });
}