【问题标题】：Transfer overflow from one div to another将溢出从一个 div 转移到另一个
【发布时间】：2017-12-17 01:27:31
【问题描述】：

情况：我有两个固定高度的 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>

JQ

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

});

【问题讨论】：

你能举个例子吗？代码？一个图像？我无法想象你的概念。
想象这是一个 div：|text|。你想要|long content| <other stuff> |overflow of long content|这样的东西吗？
当然 :: 我会把这个例子放在我原来的帖子里 ::
@JohnRuiz 正在寻找类似的解决方案。您是否找到了性能最佳的合适解决方案？
@GiteshPurbia 抱歉花了一些时间回复。这个问题实际上已经有 5 年以上的历史了，所以我建议我获得的任何解决方案都可以用更现代的东西代替？

标签： jquery html css

【解决方案1】：

这只是一种 JS。

你应该在 JS 中做什么：

获取cont1的高度
当内容加载到cont1时，获取<p>的高度
如果<p>的高度>cont1的高度，从<p>的文本末尾开始删除文本（并将其存储到临时变量中），直到它的高度等于或小于比cont1。
删除的文本（之前存储的）将转储到第二个cont2。将文本包装在 <p> 中，这样如果您打算再次执行此壮举，您就有 2 个容器需要再次处理。

不是最优雅的代码（内容很长时循环会滞后），但是it's worth a try

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;
}

JS：

//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(''));

【讨论】：

同意，这个没有 JS 是不行的，因为你从根本上改变了内容标记。
这是一个概念验证代码：jsfiddle.net/P7Dfz/4（可能由于循环而滞后）

【解决方案2】：

这有点hacky，但这应该可以。 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;
}

JS

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

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

【讨论】：

我做了些小改动，让它更加自动化jsfiddle.net/D6L7u/1

【解决方案3】：

CSS3 通过其Multi-column Layout Module 支持这种柱状流。 Caniuse.com 显示它isn't supported around the board。

这是一个Quirksmode.com article，展示了它的使用方式。

【讨论】：

【解决方案4】：

这样的框架允许您检测内容何时溢出（否则是一项艰巨的任务）。然后，您可以决定要如何处理溢出的内容。

http://jsfiddle.net/mrtsherman/R7cZL/

<div  id="a" contenteditable>Start typing here...</div>
<div  id="b"></div>
<div  id="c">You should position me way off the screen</div>
<div  id="d">I'm a mirror of div C</div>

div {         
    border: 1px solid gray; 
    margin: 5px; 
    height: 75px; 
    width: 100px; 
    overflow: hidden; 
    display: inline-block;
}
div#c { visibility: hidden; position: absolute; left: -9999px; }

$('#a').bind('input propertychange', function() {
    //copy current content into hidden div c
    $('#c').html($(this).html());
    //now we know height of content if it we didn't have overflow on
    var cHeight = $('#c').height();
    //compare to current height, if greater than then we have overflowed
    if (cHeight > $(this).height()) {
        //move new content in div B
        //there are lots of ways to do this and it depends on what
        //people's input is. Can they cut/paste in?
        //Maybe we start at the end of the string, working backwards until
        //we find that content now fits.
    }
});

【讨论】：

【解决方案5】：

HTML

<div id="block1" style=">
  <p>
    long text...
  </p>  
</div>

<div id="block2">

</div>

jQuery

var $1stblock = $('#block1');
var $2ndblock = $('#block2');
var $1stpar = $('#block1 p');
var diff = $1stpar.height() - $1stblock.height();
$1stpar.clone().appendTo($block2).css('top', diff);

CSS

div {
  position: relative;
  overflow: hidden;
}

div p {
  position: absolute;
}

【讨论】：

【解决方案6】：

因为高度是固定的。将 html 从第一个 div 复制到第二个，然后将第二个 div 向上滚动到 div 的高度。

文本会有两份副本，但错觉是包装了内容。

这是一个工作示例：http://jsfiddle.net/natedavisolds/bxzCK/16/

【讨论】：