Question

我已经构建了一个音乐播放器，它以随机顺序从数据库中加载歌曲。我想在信息面板中显示曲目信息。因为我不知道艺术家/曲目名称的长度，所以如果它太大，我希望信息滚动带有选框效果。我被告知marquee标签的浏览器实现是坏的所以我有一个jquery插件为我做了一个很顺利的方式（我假设auther知道为什么他们是坏的并已经排序）。到目前为止一切都很好。

麻烦的是，大帐篷是否无法确定是否需要，所以我想在调用之前检查是否有必要（即文本的长度是否保证）。

现在我确定这里的问题是一个简单的问题，但我不能为我的生活弄清楚 - 你知道什么时候你一直在盯着某个东西......

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

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

<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来获取两个元素的宽度，比较它们，如果inner大于外部，则像这样启动选框：

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修改的宽度。

Answer 2

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


    if ($('#mplayerinfo_trackinfo').innerWidth() < $('#ti_inner').outerWidth()) {
        $('#ti_inner').marquee();
    }

使用JQuery的inner和outer测量时，我的结果更好。

Answer 3

ti_inner CSS需要

    white-space: nowrap;

防止div只增加高度，

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

我更喜欢检查外部mplayerinfo_trackinfo的scrollWidth和offsetWidth而不是比较2个独立div的宽度，主要是因为边缘，边框或填充不会妨碍，但在这个例子中它并不重要

继承了JSFiddle上的一个示例marquee if required

很抱歉这是在mootools，但我自己并不熟悉所有这些网页内容，并且没有使用过任何JQuery，但是根据我的阅读，它应该很容易交换。

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

3 个答案: