水平滚动内容到下一页 - 可能吗?

时间:2013-04-03 21:23:07

标签: javascript css printing-web-page

我尝试打印水平滚动内容时未成功。我已经到了我厌倦了搜索的地步,我觉得是时候问了 -

所以这里,下面是我要打印的内容的真正简化版本 -

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

Print Stylesheets for pages with long horizontal tables - (此链接还有其他一些选项,这是唯一的方法吗?)

2 个答案:

答案 0 :(得分:2)

简短而甜蜜:没有......

您无法控制使用javascript打印内容的方式。你能做的最好的事情是将“长时间打印#6 +打包到下一行”。

答案 1 :(得分: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;}

但是,总的来说,你应该在打印时让它换行。