Question

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”，并且完全隐藏在LHS之外。

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

EDIT3：发布解决方案

Answer 1

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

更改overflow:auto并将其设置为100px，并设置滚动条。

DEMO： http://jsfiddle.net/skram/QQtp6/13/

Answer 2

你有一个固定的宽度然后你说要隐藏任何溢出固定宽度的数据：

overflow: hidden;

该属性的目的是隐藏数据以保留所需的格式。如果您希望显示数据，则不希望应用overflow属性。

如果必须保持100px的宽度，则需要将属性修改为overflow: auto;，这将添加滚动条，以便仍可以在容器中查看内容。

Answer 3

overflow: hidden和width: 100px都阻止了您的需求。具有固定宽度的div将不会拉伸，然后溢出规则会隐藏溢出的文本。只需删除其中一条规则，最好是溢出规则。

Answer 4

我通过将嵌套的div元素HeaderTitle更改为span：

来解决了这个问题

http://jsfiddle.net/QQtp6/20/

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

$(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" });
            });
});

#Header
{
    width: 100px;
    font-size: 15px;
    margin-bottom: 5px;
    border-radius: 5px;
    overflow: hidden;
}

#HeaderTitle
{    
    white-space: nowrap; 
    padding-left: 5px;
    font-weight: bold;
    color: Black;
}

Answer 5

发生这种问题是因为“HeaderTitle”的宽度与“Header” - （填充）的宽度相同。我有三个解决方案。

如果您知道子元素的宽度。

.HeaderTitle { width：666px; //子元素的宽度，Ex。 here }
你也可以浮动你的div，这将迫使它尽可能小，但如果div内的任何东西浮动，你需要使用clearfix。

.HeaderTitle { float：left; // Ex。 here }
使用span而不是div。由于span不像使用div那样显示奇怪的行为，如果你的设计允许你可以使用span。防爆。 here

Div元素不扩展以保存HTML文本

5 个答案: