将溢出从一个div转移到另一个

小编典典

将溢出从一个div转移到另一个

css

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

});

阅读 578

2020-05-16

共1个答案

小编典典

这只是一种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;
}

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

2020-05-16