将选取框效果应用于溢出其容器的文本吗？

Question

是否有一种方法可以对多个元素实现淡入/淡出效果，同时还可以对使用JQuery溢出容器宽度的特定元素应用某种选框效果？

为了提供进一步的描述，如果一个元素没有溢出容器，则无需应用选取框效果（从左到右）；但是，如果条件是该元素确实溢出了容器，则将激活与该特定元素有关的选取框效果。

到目前为止，我已经创建了一个片段，其中这些元素以无限的顺序淡入和淡出，但是我还没有弄清楚如何应用选取框效果以保持在容器的宽度内（{{1 }。到目前为止，这些元素只是使容器溢出，因为我希望它们保持在一行上（因此，我已应用.info。）

以下是我到目前为止取得的进展的摘要：

white-space: nowrap

(function() {
  var tab = $(".info .tab");
  var tabIndex = -1;

  function showNextTab() {
    ++tabIndex;
    tab
      .eq(tabIndex % tab.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextTab);
  }
  showNextTab();
})();

.info {
  background: skyblue;
  display: inline-block;
  line-height: 1;
  width: 500px;
  padding: 20px;
  box-sizing: border-box;
}

.info .tab {
  display: none;
}

h2.tab {
  margin: 0;
  padding: 0;
  border: 0;
  white-space: nowrap;
  text-align: center;
}