<div id="js_trim" class="text-box">
  <span class="label">あいうえお</span>
  <span class="label">かきくけこ</span>
  <span class="label">さしすせそ</span>
  <span class="label">たちつてと</span>
  <span class="label">なにぬねの</span>
</div>

.text-box {
  width: 280px;
  border: 1px solid #ccc;
  margin-bottom: .5rem;
  white-space: nowrap;
  overflow: hidden;
}
.label {
  line-height: 1.5;
  border: 1px solid #777777;
  display: inline-block;
  padding: 4px;
  line-height: 1;
  width: 90px;
}

$(function() {
  var selector = $('#js_trim');
  var parent_width = parseFloat(selector.css('width'));
  var total_width = 16; // 3点リーダー分
  selector.find('span').each(function(index, element) {
    var width = element.getBoundingClientRect().width;
    console.log(width);
    total_width += width;
    if (index > 0) total_width += 5 // span間
    if (parent_width < total_width) $(element).hide();
  });
  if (parent_width < total_width) selector.append('<span>…</span>');
});