Ellipsis Overflow

Forced ellipsis on overflow of container

HTML

<div id="margin">

<div id="ellipsis">...</div>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>
<button class="btn">1</span>


</div>

CSS

#margin {
  position:relative;
    width: 57%;
    overflow: hidden;
    white-space: nowrap;
    padding: 10px;
    background-color:white;
}

#ellipsis {
  display:none;
  position:absolute;
  width:20px;
  top:0;
  bottom:0;
  right:0;
  padding:10px;
  background-color:white;
}

JavaScript

var margin = $('#margin'),
	ellipsis = $('#ellipsis'),
	contentWidth = 0;
  
// get total width of all buttons
$('.btn').each(function(){
	contentWidth += $(this).outerWidth(true);
});

// show or hide ellipsis if button width > container width
$(window).resize(function(){
	var marginWidth = margin.width() - 40;

	if (marginWidth < contentWidth) {
  	ellipsis.show();   
  } else {
  	ellipsis.hide();
  }
  
});