使用溢出滚动的文本创建div

Question

现在我有一个跨度，其溢出隐藏在HTML和CSS中 - 我在这个网站上的Twitter帖子中使用它：http://benjaminpotter.org/clients/c3carlingford/

HTML＆amp;内联CSS

<span style='width:686px; height:50%; display:block; white-space: nowrap; padding-top:14px; padding-left:10px; overflow:hidden;'></span>

现在我需要以某种方式检测div何时溢出，然后当它发生时，允许文本使用jQuery或类似的东西滚动。

知道如何做这两件事吗？

Answer 1

你可以通过用div元素包装溢出的span并让div溢出来实现：

<div id="twitWrap" style="overflow:hidden;">
  <span id="myTwitter">A new Twit appears</span>
</div>

这样当您将新twit添加到html时，您可以检查span元素的宽度是否大于其父元素：

if( $("#twitWrap")[0].offsetWidth < $("#myTwitter")[0].offsetWidth) ) ...

然后应用您想要的任何jquery代码。

Answer 2

你可以完成一些技巧，比如放置一个结尾元素：

<span style="...">Tweet twweeeet ...
 <span id="endd" style="visibility:hidden"> </span>
</span>

然后检查#ender是否超出其容器宽度：

function toolarge() {
  var ender = $('#endd');
  return ender.offset().left - ender.parent().offset().left > ender.parent().width()
}

他们可能会做一些调整，比如使用position（）代替offset（）并使用position：absolute属性，但你明白了。

Answer 3

您可能有一个内部容器设置为内容的全宽（overflow:visible）。如果此内部容器比外部（overflow:hidden）容器宽，则需要滚动。移动内部容器进行滚动。