Javascript 将内容从1个元素切换到下一个元素？

比如说，我在一个页面上有两个div元素（让div1和div2）。我正在动态获取内容。内容是文本，我希望内容填充2个div元素，这样当div1空间不足时，内容显示在div2中。打个比方，这就像在笔记本上工作，笔记本的整个表面就是页面，div1和div2分别是左侧和右侧。一旦页面的一面完成，你就可以进入下一页，以此类推

其中一种方法是拆分文本，并限制每个div的字数，这将导致从div1变为div2，以此类推

我已经看过分页，这不是我要找的东西

---

但有没有更好的方法来实现这一点？也许像使用div元素的height属性来触发事件之类的东西？或者任何其他建议？

此外，您可以像这样修改

文本区域的文本限制

50
可以用任何数字替换。即使需要动态长度，也可以使用
JS
来实现

使用
JS
计算字符数，一旦达到限制，将
焦点
切换到其他
文本区域

AngularJS
或任何类似的MVC都有助于轻松解决此问题。
此外，您可以像这样修复
textarea
的文本限制

50
可以用任何数字替换。即使需要动态长度，也可以使用
JS
来实现

使用
JS
计算字符数，一旦达到限制，将
焦点
切换到其他
文本区域

AngularJS
或任何类似的MVC都有助于轻松解决此问题。
您可以通过以下函数检测div是否溢出：

if (
    element.offsetHeight < element.scrollHeight
    || element.offsetWidth < element.scrollWidth
)
{
    // Overflow
}
else
{
    // No overflow
}

if(
element.offsetHeight

您可以创建一个函数，将内容片段从第一个div逐步分离到第二个div，直到溢出消失。
您可以使用以下函数检测div何时溢出：

if (
    element.offsetHeight < element.scrollHeight
    || element.offsetWidth < element.scrollWidth
)
{
    // Overflow
}
else
{
    // No overflow
}

if(
element.offsetHeight

您可以创建一个函数，将内容从第一个div逐步分离到第二个div，直到溢出消失。
我将尝试一个回调函数，您可以淡入第一个div，然后调用填充第二个div的函数：

           $(".div1").fadeOut(200,callbackFunction(){$(".div2").html("some text")});

我将尝试回调函数，您可以淡入第一个div，然后调用填充第二个div的函数：

           $(".div1").fadeOut(200,callbackFunction(){$(".div2").html("some text")});

这是一个奇怪的解决方案，但它是有效的！我不推荐在制作网站上使用它：P


$（函数（）{
函数规格化（）{
$（'#div2'）。文本（''）；
while（$（'div1'）[0]。滚动高度>$（'div1'）[0]。clientHeight）{
//获取文本中的单词
var words=$（'#div1'）.text（）.split（''）；
//最后一句话
var lastWord=words.slice（-1）；
//把它倒到第二课
$（'#div2'）.text（$（'#div2'）.text（）+lastWord）；
//将其从阵列中删除
words.length=words.length-1；
//然后把剩下的倒回到第1组
$（'#div1'）.text（words.join（''）；
}
}
$（“按钮”）。单击（标准化）；
$（'textarea'）.change（函数（）{
$（'#div1'）.text（$（'textarea'）.val（））；
});
});
#第1部分{
宽度：100px；
高度：100px；
背景颜色：蓝色；
显示：块；
单词break：打破一切；
}
#第二组{
边缘顶部：100px；
宽度：100px；
高度：200px；
背景颜色：绿色；
显示：块；
单词break：打破一切；
}

aaaa bbbb CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
规范化

aaaa bbbb CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
这是一个奇怪的解决方案，但它确实有效！我不推荐在制作网站上使用它：P


$（函数（）{
函数规格化（）{
$（'#div2'）。文本（''）；
while（$（'div1'）[0]。滚动高度>$（'div1'）[0]。clientHeight）{
//获取文本中的单词
var words=$（'#div1'）.text（）.split（''）；
//最后一句话
var lastWord=words.slice（-1）；
//把它倒到第二课
$（'#div2'）.text（$（'#div2'）.text（）+lastWord）；
//将其从阵列中删除
words.length=words.length-1；
//然后把剩下的倒回到第1组
$（'#div1'）.text（words.join（''）；
}
}
$（“按钮”）。单击（标准化）；
$（'textarea'）.change（函数（）{
$（'#div1'）.text（$（'textarea'）.val（））；
});
});
#第1部分{
宽度：100px；
高度：100px；
背景颜色：蓝色；
显示：块；
单词break：打破一切；
}
#第二组{
边缘顶部：100px；
宽度：100px；
高度：200px；
背景颜色：绿色；
显示：块；
单词break：打破一切；
}

aaaa bbbb CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
规范化

aaaa bbbb CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC
您可以使用本例中的代码，它有4个固定大小的
div
元素，并排显示（请参见CSS），并且在第一个
div
中包含所有文本。代码将根据需要将文本重新分发到下一个
div
，以避免溢出：


$（函数（）{
//从第一个div中提取所有单词，并让它们溢出到下一个div中
var allwords=$（'div.box'）.text（）.split（/\s+/）；
$（'div.box'）.eac