0

客户希望每次用户加载页面时在首页上显示随机报价。有些引号太长了，从设计上讲，我们不希望引号占用超过一行。我想要做的是让引号水平移动，如果它对父 div 来说太长，然后循环回来，就像新闻行情一样。

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

以及相关代码：

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

});
4

2 回答 2

1

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

它看起来div.frases有一个硬编码的宽度958px。

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

为了确定由其内容定义的该元素的宽度，您可能希望通过向左浮动来“收缩包装float:left”该元素：（如果浮动不适用于您的应用程序，还有其他“收缩包装”方法。）

此外，overflow:hidden从div.frasesto移动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 */
}

编辑：

这是一个基于您提供的代码的工作示例。

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

于 2013-07-09T19:57:18.920 回答
0

我知道原来的帖子看起来好像我只是在询问如何修复检查溢出的 JS，但我也在询问如何在文本溢出其父元素时赋予文本选取框效果。

经过大量的试验和错误，我找到了一个不错的解决方案。你可以在这里看到一个工作示例

代码是：

HTML：

<div class="quotes_wrapper">
    <div class="quotes">
            Flab flee wheezer doo ingle wheezer twaddle ha shnozzle. Ding duh wobble! Tizzle boo wobble ha dabba flong hum flee? Hum shnizzle zangle twaddlefl.
    </div>

CSS：

div.quotes_wrapper {
width: 960px;
height: 20px;
background-color: black;
overflow:hidden;
padding: 5px;
font-family: Arial, Helvetica, sans-serif;
}

div.quotes {
    white-space: nowrap;
    position: relative;
    color: white;
    float:left;
}

.marquee{
-webkit-animation: marquee 30s infinite linear 3s;
}

@-webkit-keyframes marquee{
  0% {left: 0px;}
50% {left: -1920px;color:white}
51%{color:black}
53%{left:1000px}
54%{color:white}
100%{left: 0px;}
}

JS（使用 JQuery）：

$(document).ready(function() {
    var pageWidth = $("div.quotes_wrapper").width();
    var elementWidth = $("div.quotes").width();
    var elementLeft = $("div.quotes").position().left;

    if(pageWidth - (elementWidth + elementLeft) < 0){
      $("div.quotes").addClass("marquee");
    } else {
      console.log("No overflow");
    }
  });

动画本身需要根据内容进行调整。

于 2013-07-11T21:18:43.130 回答