jquery - Div 元素未展开以容纳 HTML 文本

HTML:

<div id="Header">
    <div id="HeaderTitle">
        This is a very long title which should should force HeaderTitle to expand.
    </div>
</div>

JavaScript:

$(document).ready(function() {
    $('#HeaderTitle').mouseover(function(e) {
        var distanceToMove = $(this).width() - $('#Header').width();
        var timeToTakeMoving = 30 * distanceToMove;

        $(this).animate({
            marginLeft: "-" + distanceToMove + "px"
        }, timeToTakeMoving);
    }).mouseout(function(e) {
        $(this).stop(true).animate({
            marginLeft: "0px"
        });
    });
});

JSFiddle: http://jsfiddle.net/QQtp6/7/

我希望扩展 div 'HeaderTitle' 以容纳其中的文本。这将允许我在鼠标悬停时滚动文本。为什么 div 不保留其内容？

编辑:这里的目标不是让所有文本都可见。我想在固定宽度的 div 中显示一部分文本，然后在该 div 中滚动文本。

例子:

如果文本是:“FULL TEXT HERE”，我希望在鼠标悬停之前只显示“FULL TE”。那时我希望它过渡到“TEXT HERE”，FULL 被隐藏到 LHS。

EDIT2:我认为解决方案是为 HeaderTitle 使用 span 而不是 div。一会。

EDIT3:发布解决方案

最佳答案

删除 overflow:hidden 将一直扩展 div。

更改 overflow:auto，它应该按照您的设置扩展到 100px 并显示滚动条。

演示: http://jsfiddle.net/skram/QQtp6/13/

关于jquery - Div 元素未展开以容纳 HTML 文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11161930/