0

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 使用跨度而不是 div。一瞬间。

EDIT3：发布的解决方案

4

5 回答 5

0

两者overflow: hidden都width: 100px在阻止你想要的。固定宽度的 div 不会拉伸，溢出规则会隐藏溢出的文本。只需删除其中一项规则，最好是溢出规则。

于 2012-06-22T18:21:09.650 回答
0

我通过将嵌套的 div 元素 HeaderTitle 更改为跨度来解决该问题：

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;
}
于 2012-06-22T18:32:33.613 回答
0

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

更改它overflow:auto，它应该扩展为 100px，因为你已经设置它并显示一个滚动条。

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

于 2012-06-22T18:18:25.743 回答
0

您有一个固定宽度，然后您声明隐藏任何超出固定宽度的数据：

overflow: hidden;

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

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

于 2012-06-22T18:18:52.303 回答
0

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

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

    .HeaderTitle { width: 666px;//子元素的宽度，例如。这里 }

  2. 您也可以浮动您的 div，这将迫使它尽可能小，但如果您的 div 内的任何内容浮动，您将需要使用clearfix 。

    .HeaderTitle { float: left;// 例如。这里 }

  3. 使用 span 而不是 div。由于 span 不会像使用 div 那样显示奇怪的行为，因此如果您的设计允许您可以使用 span。前任。这里
于 2012-06-23T17:09:45.167 回答