3

水平にスクロールするコンテンツを印刷しようとして失敗しました。探すのに飽きてきたので、質問する時が来たと思います -

以下は、印刷したいコンテンツの非常に単純化されたバージョンです-

HTML

<div id="printingDiv">

    <div class='filterRow'>Something long to print#1 Something long to print#2 Something long to print#3 Something long to print#4 Something long to print#5 Something long to print#6 Something long to print#7 Something long to print#8 Something long to print#9 Something long to print#10</div><br/>

    <div class='filterRow'>Something long to print#1 Something long to print#2 Something long to print#3 Something long to print#4 Something long to print#5 Something long to print#6 Something long to print#7 Something long to print#8 Something long to print#9 Something long to print#10</div><br/>

    <div class='filterRow'>Something long to print#1 Something long to print#2 Something long to print#3 Something long to print#4 Something long to print#5 Something long to print#6 Something long to print#7 Something long to print#8 Something long to print#9 Something long to print#10</div><br/>

    <div class='filterRow'>Something long to print#1 Something long to print#2 Something long to print#3 Something long to print#4 Something long to print#5 Something long to print#6 Something long to print#7 Something long to print#8 Something long to print#9 Something long to print#10</div><br/>

</div>

CSS

.printDiv {
     font-size: 12pt; //else the content adjusts its font-size just to fit the print page
     width: auto;
}

.filterRow {
     white-space: no-wrap; //just for the sake of this example, to make sure the content overflows
     width: auto;
}

Javascript

$("#printingDiv").show();
window.print();

出力

印刷物では、印刷するのに長いもの＃5と印刷するのに長いもの＃6の一部までしかコンテンツが表示されません。

私が見たいのは、印刷するのに長いもの#6から次のページに印刷される印刷するのに長いもの#10までの残りの部分です。

要約すると、最初のページに収まらない横スクロールのコンテンツを別のページに印刷できるようにしたいと考えています。これは可能ですか？

私が参照したリンクのいくつか -

http://alistapart.com/article/goingtoprint

http://meyerweb.com/eric/articles/webrev/200001.html

横長のテーブルを含むページのスタイルシートを印刷する- (このリンクには他のオプションがいくつかありますが、それが唯一の方法ですか?)

4

2 に答える 2

3

短くて甘い：いいえ...

JavaScript を使用して印刷する方法を完全に制御することはできません。あなたができる最善のことは、「印刷するのに長い何か＃6 +を次の行にラップすることです」。

于 2013-04-03T21:25:26.420 に答える
1

理論的には、どのコピーが切り取られるかを知っていれば、そのテキストを画面上では隠されているが印刷すると見えるブロックに含めることができます。

<div class="noWrapContent">This is a long piece of text that stops here. This is the text that would be cut off.</div>
<div class="forPrint">This is the text that would be cut off.</div>

そして、このcssで：

.forPrint { display: none; }

@media print { display: block;}

しかし、全体として、印刷するときは折り返す必要があります。

于 2013-04-04T20:28:09.717 に答える