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

Question

我构建了一个音乐播放器，它以随机顺序从数据库加载歌曲。我想在信息面板中显示轨道信息。因为我不知道艺术家/轨道名称的长度，所以如果信息太大，我希望信息能够以字幕效果滚动。我被告知 marquee 标签的浏览器实现很糟糕，所以我有一个 jquery 插件可以以一种非常流畅的方式为我做这件事(我假设作者知道它们为什么不好并且已经对它进行了排序)。到目前为止一切顺利。

问题是跑马灯不知道是否需要它，所以我想在调用它之前检查它是否有必要(即文本的长度是否保证)。

现在我确定这里的问题是一个简单的 css 问题，但我终其一生都无法弄清楚 - 你知道什么时候你盯着某个东西看得太久了......

我想做的是，如果内部 div 的内容大于外部 div，则在内部 div 上调用选取框，但无论我做什么，我似乎都无法让我的内部 div 水平延伸超出我的外部 div，除非我设置固定宽度(这不是很有用，因为我不知道内容的宽度)。

这是我简化的 HTML(包装器包含一些 float 在两侧的其他内容):

<div id="mplayerinfo_wrapper"><div id="mplayerinfo_trackinfo"><div id="ti_inner"></div></div></div>

这是我简化的 CSS:

    #mplayerinfo_wrapper{
    width:545px;
    height:30px;
    margin-top:32px;
    display:inline-block;
    float:left;
}

#mplayerinfo_trackinfo{
    height:30px;
    width:238px;
    display:inline-block;
    overflow:hidden;
    float:left;
}

#ti_inner{
    float:left;
    height:30px;
width:auto;
}

然后我希望使用 jquery 获取两个元素的宽度，比较它们，如果内部大于外部，则像这样启动选取框:

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

如果这不能通过 css 解决，是否可以使用 jquery/javascript 获取内容宽度。有任何想法吗？提前致谢

Answer 1

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