文章/答案/技术大牛

发布

社区首页 >问答首页 >从一个div到另一个div的传输溢出

问从一个div到另一个div的传输溢出
EN

Stack Overflow用户

提问于 2012-02-16 03:36:47

回答 6查看 12.2K关注 0票数 17

情境:我有两个固定高度的div，溢出设置为隐藏在两者上，而动态文本内容在第一个div内。如果该内容超出了第一个div的溢出边界，我希望它自动溢出到第二个div。

我的问题只是如何做到这一点？我已经研究过了，最近发现的是一个JQuery插件，它会自动为类似报纸的版面创建专栏。虽然这不是我所需要的，但它确实给了我希望，这在一个更简单的层面上是可以实现的。

视觉示例：

  <html>
     <head>
       <style type="text/css">
          div{height:1in;width:4in;overflow:hidden}
        </style>
     </head>
    <body>
     <div id="d1">...(enough text to cause overflow exceeding 1in height)...</div>
     <div id="d2">...(the rest of the text that got cut off from the first div)...</div>
    </body>
   </html>

谢谢大家！根据所有的输入，我把这些放在一起。注:这可能不符合每个人的目的：

我在JQuery做的
这是非常概念性的。
每一个附加的项目都有它自己的元素，而不仅仅是打开文本。
为了满足我的需要，我已经知道一个div不会突破溢出限制。

话虽如此：

HTML

<html>
<head>
<style type="text/css">
    #base{border:1px black solid;height:2in;width:3in;overflow:hidden;}
    #overflow{border:1px black solid;width:3in;}
    .content{width:2in}
</style>
<script type="text/javascript" src="ref/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="work.js"></script>
</head>
<body>
<div id="base">
    <div id="sub"></div>
</div>
<br />
<div id="overflow">
</div>

$(document).ready(function(){

//  An array of content, loaded however you wish
var items=new Array();
items[0]='<div class="content" id="C0" style="border:1px blue solid;height:.75in">content 1</div>';
items[1]='<div class="content" id="C1" style="border:1px green solid;height:.75in">content 2</div>';
items[2]='<div class="content" id="C2" style="border:1px red solid;height:.75in">content 3</div>';
items[3]='<div class="content" id="C3" style="border:1px yellow solid;height:.75in">content 4</div>';
items[4]='<div class="content" id="C4" style="border:1px orange solid;height:.75in">content 5</div>';

//  Variable for the height of the parent div with the fixed width
var baseheight=$("#base").css('height').substring(0,$("#base").css('height').length-2);

//  Function to dynamically get the height of the child div within the fixed width div
function subheight(){return $("#sub").css('height').substring(0,$("#sub").css('height').length-2);}

// For each individual piece of content...
for(i=0;i<items.length;i++)
    {
    //  Add it to the child div
    $("#sub").append(items[i]);

    // Variable for the difference in height between the parent and child divs
    var diff=subheight()-baseheight;

    //  If this piece of content causes overflow...
    if(diff>0)
        {

        // Remove it...
        var tooMuch="#C"+i;$(tooMuch).remove();

        // And put it in the overflow div instead
        $("#overflow").append(items[i]);
        }
    }

});

jquery

html

css

回答 6

Stack Overflow用户

回答已采纳

发布于 2012-02-16 03:47:54

这只是JS而已。

在JS中你应该做什么：

获取cont1的高度
当内容加载到cont1时，获取<p>高度
如果<p>的高度>cont1的高度，从<p>的文本末尾开始删除文本(并将其存储到临时变量)，直到其高度等于或小于cont1。
删除的文本(之前存储的)将被转储到第二个cont2中。将文本包装在<p>中，以便如果您计划再次执行此壮举，您将再次处理两个容器。

不是最优雅的代码(当内容非常长时循环会滞后)，但是值得一试

HTML：

<div id="cont1">
    <p>long text here</p>
</div>
<div id="cont2">
    <p><!-- future content --></p>
</div>

CSS：

#cont1{
    height:100px;
    background:red;
    margin-bottom:10px;
    padding:10px;
}
#cont2{
    height:100px;
    background:blue;
    margin-bottom:10px;
    padding:10px;
}

联署材料：

//existing text must be rendered in the first container so we know how high it is compared to the div

//get references to avoid overhead in jQuery
var cont1 = $('#cont1');
var cont1Height = cont1.height();

var p1 = $('#cont1 p');
var p1Height = p1.height();

var p2 = $('#cont2 p');

//get text and explode it as an array
var p1text = p1.text();
p1text = p1text.split('');

//prepare p2 text
p2text = [];

//if greater height
while (p1Height > cont1Height) {

    //remove last character
    lastChar = p1text.pop();

    //prepend to p2 text
    p2text.unshift(lastChar);

    //reassemble p1 text
    p1temp = p1text.join('');

    //place back to p1
    p1.text(p1temp);

    //re-evaluate height
    p1Height = p1.height();

    //loop
}

//if less than, assemble p2 text and render to p2 container
p2.text(p2text.join(''));

票数 10

Stack Overflow用户

发布于 2012-02-16 03:53:04

有点烦人，但这应该管用。http://jsfiddle.net/D6L7u/

基本上，它将第一个div的内容复制到第二个div中，然后对其进行偏移，这样初始文本就不会显示两次。

HTML

<div id="one" class="mydiv">
Tail beef tenderloin chicken. Ground round tenderloin t-bone biltong fatback andouille bacon, ribeye leberkase boudin ham hock capicola salami frankfurter chicken. Boudin meatball pig strip steak, tongue sirloin brisket bacon capicola beef t-bone hamburger shankle beef ribs frankfurter. Capicola bresaola brisket chuck, short ribs ham jerky. Hamburger venison turkey short ribs jerky, bresaola chuck filet mignon spare ribs. Drumstick kielbasa sirloin jowl flank shoulder, salami tail short ribs corned beef chicken jerky tri-tip bresaola.
</div>

<div id="two" class="mydiv">

</div>

CSS

.mydiv
{
    float: left;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    overflow: hidden;
}

$(function() {
    var copy = $("#one").clone().attr("id", "onecopy").css({
        "margin-top": "-200px",
        "height":"400px"
    });
    $("#two").append(copy);
});

您可能希望将js修改得更动态一些，例如获取div#one的当前高度，而不是静态值。

票数 7

Stack Overflow用户

发布于 2012-02-16 03:55:29

CSS3通过其多列布局模块支持这种柱状流。不过，Caniuse.com显示它是不受董事会的支持。

这是一个Quirksmode.com文章，展示了它是如何使用的。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9305198

复制

相似问题

问从一个div到另一个div的传输溢出
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从一个div到另一个div的传输溢出EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问从一个div到另一个div的传输溢出
EN