jquery - 仅当内容溢出父div时，如何才能使内容水平滑动？

Question

客户希望每次用户加载页面时在首页上显示随机引述。有些引号太长，在设计方面我们不希望引号超过一行。我想要做的是，如果引号对于父 div 而言太长，则让引号水平移动，然后循环返回，就像新闻自动收报机一样。

我得到了一个检查内容是否溢出的脚本，但该脚本似乎无法正常工作，see here

以及相关代码:

HTML:

<div class="frases_wrapper" style="width: 960px; height: 20px; background-color: black;">
  <div class="frases" style="white-space: nowrap; position: relative; overflow: hidden; color: white; width: 958px;"></div>
</div>

JS:

$(document).ready(function () {

  var pageWidth = $("div.frases_wrapper").width();
  var elementWidth = $("div.frases").width();
  var elementLeft = $("div.frases").position().left;

  if (pageWidth - (elementWidth + elementLeft) < 0) {
    alert("overflow!");
  } else {
    alert("doesn't overflow");
  }

});

Answer 1

我不确定您是如何处理水平滚动的，所以我的回答可能无法完全解决您的问题。但是，这是我注意到的:

看起来 div.frases 的硬编码宽度为 958px。

这可以防止 div 扩展到超出其包装器的宽度，这是水平滚动所必需的。

为了确定由其内容定义的该元素的宽度，您可能希望“shrink wrap”该元素向左浮动:float:left。 (如果 float 对您的应用程序不起作用，还有其他“收缩包装”方法。)

此外，将 overflow:hidden 从 div.frases 移动到 div.frases_wrapper 以将可见内容限制在包装器。

因此，您的 CSS 定义将如下所示:

div.frases_wrapper {
  width: 960px;
  height: 20px;
  background-color: black;
  overflow: hidden; /* ADDED */
}

div.frases {
  white-space: nowrap;
  position: relative;
  color: white;
  float:left;
  /*width: 958px; REMOVED */
  /*overflow: hidden; REMOVED */
}

编辑:

这是一个working example基于您提供的代码。

尝试调整文本内容的长度，使其不会/不会溢出。