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

这只是一种JS。

您应该在JS中做什么：

1. 得到的高度

   cont1

2. 将内容加载到时

   cont1

   ，获取

   <p>

   高度
3. 如果

   <p>

   的高度>

   cont1

   的高度，则从的文本末尾开始删除文本（并将其存储到临时变量中），

   <p>

   直到其高度等于或小于

   cont1

   。
4. 删除的文本（之前存储的文本）将被转储到第二个文本中

   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 jQueryvar 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 arrayvar p1text = p1.text();p1text = p1text.split('');//prepare p2 textp2text = [];//if greater heightwhile (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 containerp2.text(p2text.join(''));​