<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();
		}
	});
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js