2

長い間答えを見つけようとしましたが、何も見つかりませんでした。

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

各ページの最後にある div 内に長いテキストを貼り付けない限り、すべて正常に動作します。次に、テキストの一部のみが表示され、残りは div の外に出ます (「overflow: hidden」のため、非表示になります)。

オーバーフローのコンテンツを検出して次のページに移動する javascript/jquery メソッドはありますか (見つけられませんでした)、または各 div 内のテキストを分離できる CSS スタイルはありますか? CSS3 の複数列について読んだことがありますが、sth で同様の操作を行う必要がありますが、列ではなく行を分離する必要があります。

4

1 に答える 1

1

あなたの最善の策は、スクロールの高さをチェックしてオーバーフローがあるかどうかをJavaScriptで検出しようとすることoverflow: hiddenだと思います。auto

この場合、コンテンツが使用可能なスペースに収まるまで、テキストの一部を動的に移動し始めることができます (おそらく単語ごとに)。

いくつかの具体的なテクニックについては、たとえば、このスレッドをチェックしてください: jquery を使用して要素のオーバーフローを検出する

于 2012-09-17T19:10:17.433 に答える