Printing horizontally scrolling content onto the next page - possible?

问题

I've been unsuccessfully trying to print horizontally scrolling content. I've come to a point where I'm tired of searching and I think it's time to ask -

So here goes, below is a really simplified version of the content I want to print -

The 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>

The 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;
}

The Javascript

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

The Output

On the printout - I only see content till about Something long to print#5 and part of Something long to print#6.

What I want to see is the rest of Something long to print#6 upto Something long to print#10 printed on the next page.

So, to sum it up, I want to be able to print horizontally scrolling content that doesn't fit in the first page onto another page. Is this even possible?

Some of the links I've referred to -

http://alistapart.com/article/goingtoprint

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

Print Stylesheets for pages with long horizontal tables - (This link has some other options, is that the only way?)

回答1:

Short and sweet: no...

You have absolutely no control over the way things get printed with javascript. The best you can do is wrap the "Something long to print#6+ onto the next line".

回答2:

Theoretically, you could if you knew what copy would be cut off and include that text in a block that is hidden on the screen but visible when printed.

<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>

and then in ths css:

.forPrint { display: none; }

@media print { display: block;}

But, overall, you should just let it wrap when you are printing.

来源：https://stackoverflow.com/questions/15798401/printing-horizontally-scrolling-content-onto-the-next-page-possible

标签

javascript

css

printing-web-page