Javascript 使div溢出其容器以使用marquee.js

我已经建立了一个音乐播放器，可以从数据库中随机加载歌曲。我想在信息面板中显示轨迹信息。因为我不知道艺术家/曲目名称的长度，如果太大的话，我希望信息可以用字幕效果滚动。我被告知marquee标记的浏览器实现不好，所以我有一个jquery插件，可以以一种非常流畅的方式为我实现它（我假设作者知道为什么它们不好，并对其进行了排序）。 到目前为止还不错

问题是字幕无法确定是否需要它，所以我想在调用它之前检查一下它是否有必要（即文本的长度是否保证）

现在我确信这里的问题是一个简单的css问题，但我一辈子都无法解决它-你知道当你盯着某个东西看太久的时候

我试图做的是，如果内部div的内容比外部div大，则调用内部div上的选框，但无论我做什么，我似乎都无法使内部div水平延伸到外部div之外，除非我设置了固定的宽度（这不是很有帮助，因为我不知道内容的宽度）

这是我的简化HTML（包装器包含一些其他浮动的内容）：

然后我希望使用jquery获得这两个元素的宽度，比较它们，如果内部大于外部，则按如下方式启动字幕：

var owidth=$('#mplayerinfo_trackinfo').width();
var iwidth=$('#ti_inner').width();
if(iwidth>owidth){$('#ti_inner').marquee();};

---

如果这个问题不能通过css解决，那么可以通过jquery/javascript获得内容宽度。有什么想法吗？提前感谢

您的CSS看起来适合您要完成的任务。我会试着做一个比较：

if ($('#mplayerinfo_trackinfo').innerWidth() < $('#ti_inner').outerWidth()) { $('#ti_inner').marquee(); } if（$（'#mplayerinfo_trackinfo'）.innerWidth（）<$（'#ti#u inner'）.outerWidth（））{ $（'ti#u inner'）.marquee（）； }

---

在使用JQuery和度量值时，我得到了更好的结果。

因为您已经知道外部div的宽度，所以与该度量值进行比较可能更容易，而不是动态地请求该宽度。我试图重新创建简化程序，但遇到的问题是width（）函数只返回div的默认宽度，而不是css修改的宽度。

ti_内部css需要

    white-space: nowrap;

为了防止div的高度增加

然后我们可以检查宽度，看看是否需要选框

我更喜欢检查外部mplayerinfo_trackinfo的scrollWidth和offsetWidth，而不是比较两个单独div的宽度，主要是为了避免和边距、边框或填充的影响，但在本例中这并不重要

下面是JSFIDLE上的一个示例

---

很抱歉，它在mootools中，但我自己对所有这些web内容都是新手，没有使用过任何JQuery，但从我所读到的内容来看，它应该很容易交换。

即使内部div中的内容比外部div大，内部div也只能与其容器一样大。检查内部div的文本长度并根据它决定是否使用字幕可能更容易。这可能也会有帮助-抱歉，我不完全理解。你是说即使我可以让内部div溢出，我也无法使用.width（）获得它的宽度吗。还有，你建议我比较一下外部div的宽度是什么？这是-我感觉这是一个简单的css问题-最优雅的解决方案1行2/3字-谢谢 if ($('#mplayerinfo_trackinfo').innerWidth() < $('#ti_inner').outerWidth()) { $('#ti_inner').marquee(); }

    white-space: nowrap;