Javascript 检测溢出内容

很久以来我一直试图找到答案，但什么也没找到

我使用contentEditable div在210x297mm页面上准确地编写文本。页面结束时，javascript会添加下一个页面：

if(container.scrollHeight > container.clientHeight)
{
    page_number = page_number+1
    $('#editor').append('<div id="page_'+page_number+'" class="page" onkeyup="javascript:check_page(this);" contentEditable></div><div class="marginbottom"></div>');
    $("#page_"+page_number).attr("tabindex",-1).focus();
}

if（container.scrollHeight>container.clientHeight）
{
页码=页码+1
$（“#编辑器”）.append（“”）；
$（“#页码”+页码）.attr（“tabindex”，-1）.focus（）；
}

一切正常，除非我在每页末尾的div中粘贴更多的文本。然后，只有部分文本显示出来，其余部分显示在div之外（因为“overflow:hidden”是不可见的）

是否有任何javascript/jquery方法可以检测溢出的内容并将其移动到下一页（我没有找到它），或者有任何CSS样式允许我分离每个div中的文本？

---

我读过关于CSS3多列的文章，我需要做一些类似的操作，但是要分隔行而不是列。

我认为最好的办法是不要使用

溢出：hidden

而是

auto

，并通过检查滚动高度来尝试用JavaScript检测是否有溢出

在这种情况下，您可以动态地开始移动文本的部分（可能是逐字移动），直到内容适合可用空间

---

对于一些具体的技术，请检查此线程，例如：

IMHO此解决方案并非真正有效，但我将尝试使用它。是否有任何jQuery（或其他）库允许以更快、更简单的方式处理溢出？@user1678401问题是浏览器并没有为JavaScript提供关于如何呈现内联内容的更多细节。@user1678401同意，这是一种有点复杂的方法，但浏览器不是为手动设计的，分页布局。让我们希望Adobe围绕这些更高级的CSS布局功能所做的工作很快会在所有浏览器中实现！看来我的工作可能就是你要找的。在实际渲染文本之前，您需要通过添加

可见性：hidden

来添加文本并检查溢出。如果溢出（

element.scrollWidth>element.offsetWidth

），则创建一个新页面并增加

页码。注意：-在jQuery中像这样访问
scrollWidth
$（'#page'）[0]。jQuery中的scrollWidth

-

offsetWidth

将是

$（'#page'）。width（）