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。（如果浮动对您的应用程序不起作用，还有其他“收缩包装”方法。）

另外，将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。

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

Answer 2

我知道原来的帖子让我觉得我只是在询问如何修复检查溢出的JS，但我还问如何在文本溢出其父元素时给文本带来字幕效果。

经过大量的反复试验，我找到了一个不错的解决方案。您可以看到一个有效的示例here

代码是：

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

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

如果内容溢出父div，我怎样才能使内容水平滑动？

2 个答案: